Hey ho cercato molte volte che come creare un elemento di selezione come l'immagine qui sottoCome personalizzare l'elemento select tramite css?
mio codice è
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
Questo è disponibile in jQuery ma voglio usare i CSS puro.
Grazie in anticipo ....
vedere il suo menu di selezione basato css e si può personalizzare: - http://jsfiddle.net/XxkSC/553/
HTML
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
c'è solo un problema con il codice sopra e cioè quando si fa clic sulla "nuova" freccia non accade nulla. Oltre a ciò questa è un'ottima soluzione. – hitautodestruct
Aggiunto 'pointer-events: none;' per causare click-through sulla freccia, quindi fare clic su di esso come previsto. –
option{
background-image:url(image.png);
background-repeat: no-repeat;
}
v'è alcun modo per personalizzare il prescelto come lo vedete nel vostro screenshot senza Javascript.
È possibile vedere in this example che è possibile personalizzare i colori, il riempimento e i bordi, ma non il pulsante stesso.
Anche se è stata aggiunta un'immagine di sfondo alla casella di selezione, non è possibile nascondere il gestore sul lato destro. Vorrei raccomandare di utilizzare questo: http://jamielottering.github.com/DropKick/
Devi solo modificare il CSS un po 'per soddisfare le tue necessità.
si cercano solo questa ..custom-styling-of-the-select-elements..
Qui è completamente personalizzabile selezionare, è basato su ingressi radio. http://jsfiddle.net/Idered/LufkN/
Il codice deve essere fornito direttamente nella risposta, nel caso in cui il collegamento esterno non sia disponibile. – Blazemonger
se si desidera qualcosa che funziona in tutti i principali browser includono IE7 e sopra è possibile utilizzare mia abitudine selezionare https://github.com/yanivsuzana/new_select
Non è possibile aggiungere un commento a Shailender Arora così ho scritto qui Utilizzando la pointer-events:none; vi permetterà di scegliere attraverso la freccia e si attivare il campo di selezione, così il CSS sarebbe simile a questa per quell'elemento
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events:none;
}
ho avuto un problema simile, ho creato ne esce un plugin jQuery. Fondamentalmente consente di definire l'aspetto della casella di selezione, mantenendo comunque un design universale per i dispositivi touch che ha ottenuto un buon supporto per i menu a discesa selezionati. Ecco la pagina github: https://github.com/peec/udselect
Non sono davvero sicuro di cosa stai chiedendo. Vuoi un'immagine dietro ognuna delle opzioni selezionate? – Miles
@Miles sì voglio le immagini di sfondo in opzioni selezionate se è possibile in puro css ...? –
Scoraggia l'uso di dropkick a causa del problema delle larghezze: http: // stackoverflow.it/questions/11769888/how-to-individual-target-multiple-dropdowns-in-css-per-dropkick-plug-in – user1318135