2015-07-14 11 views
6

Sto utilizzando un tema di wordpress e per qualche motivo, le caselle HTML select non hanno l'area a discesa. Sembrano semplici caselle di testo input, sebbene quando si fa clic su di esse, è possibile visualizzare l'elenco a discesa. Non riesco a trovare quale codice potrebbe spogliare le frecce a discesa.Scorri freccia in caselle di selezione non visualizzate

Questo è tutto quello che vedo nel CSS:

input:focus { 
outline: none; 
} 

select, 
input, 
textarea { 
-webkit-appearance: none; 
-webkit-border-radius:0; 
border-radius:0; 
} 
+2

Se si utilizza uno strumento di ispezione, è possibile attivare o disattivare la stili applicati all'elemento on e off e capire quale è ... Quindi, in chrome, fare clic con il tasto destro del mouse sull'elemento e selezionare "Ispeziona elemento". – Plummer

+0

Grazie. Non vedo nient'altro in merito ad esso. C'è un'attribuzione per la freccia selezionata? Mi sto chiedendo quale codice dovrei cercare per controllare la freccia di selezione. – JA4677

+2

Sbarazzarsi del 'webkit-appearance: none;' – j08691

risposta

5

Hai ignorato la proprietà -webkit-appearance per select, che è stato impostato come -webkit-appearance: menulist; come valore di default dai browser.

8

Ecco una base selezionare

<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select>

Ora vediamo dove è il problema:

select { 
 
    -webkit-appearance: none; 
 
    /*webkit browsers */ 
 
    -moz-appearance: none; 
 
    /*Firefox */ 
 
    appearance: none; 
 
    /* modern browsers */ 
 
    border-radius: 0; 
 

 
}
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select>

Quindi, quando si imposta none a appearance si sta rimuovendo la freccia (che per impostazione predefinita è menulist) e quando si imposta 0 su border-radius, si rimuove lo border per impostazione predefinita di select.

+0

'menulista' ahh, grazie. Non sono riuscito a trovare come aggiungerlo. una volta che il mio foglio di stile css non mi ha permesso di impostare questa proprietà su none, avevo bisogno di un modo per reimpostarla. – italiansoda

0

La risposta è corretta per la maggior parte, ma non ha funzionato per me. Questo ha fatto il trucco

select::-ms-expand { display: block; } 
+0

Intendevo display: block; scusate, non posso ancora modificare :) – franer

+0

ho aggiornato per voi – Mediabeastnz

0

ho provato in precedenza soluzioni, ma non funzionava per l'interfaccia utente che è stata creata usando jquery.min.css. Ho cercato di sotto css e risolto il mio issue.Here sto di mira ui-icon-carati-d che mostrato menù a tendina e l'impostazione icona discesa ci

.ui-icon-carat-d:after{ 
      background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important; 
      background-repeat: no-repeat !important; 
      background-color: #fff !important; 
    } 
Problemi correlati