Come posso modificare la dimensione del carattere di un’opzione di selezione?

Sto provando a disegnare un elenco a discesa di opzioni selezionate. È ansible rendere le dimensioni dei caratteri delle opzioni diverse dal valore predefinito? Ad esempio, il valore predefinito:

-- Select Country -- 

Sarebbe la dimensione 7pt; e una delle opzioni,

 Georgia 

Sarebbe la dimensione 13pt.

Questa è la mia lista a discesa:

 .select_join { width: 170px; height: 28px; overflow: hidden; background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE; border: #FEFEFE 1px solid; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE; box-shadow: inset 0px 0px 10px 1px #FEFEFE; } .select_join select { background: transparent; width: 170px; font-size:7pt; color:grey; border: 0; border-radius: 0; height: 28px; -webkit-appearance: none; } .select_join select:focus { outline: none; } 
 

-- Select Country -- Georgia Afghanistan

Vedi anche la mia demo su JSFiddle .

Sfortunatamente, funziona solo su Firefox. Potrebbe essere che altri browser non supportano lo stile degli elementi ?

Browser su cui ho provato:

  • Chrome: versione 27.0.1453.116 m
  • IE: 10
  • Firefox: 22.0

Aggiungi una class CSS al tag per modificarla: http://jsfiddle.net/Ahreu/

Attualmente i browser WebKit non supportano questo comportamento, in quanto non è definito dalle specifiche. Dai un’occhiata a questo: come stile l’elemento opzione di un tag selezionato?

È fattibile ma difficile.

Le normali opzioni a selezione diretta non accetteranno stili. MA. Se c’è un parametro “taglia” nel tag, verrà applicato quasi qualsiasi CSS. Usando questo trucco, ho creato un violino che è praticamente equivalente a un normale tag select, inoltre il valore può essere modificato manualmente come un ComboBox nei linguaggi visivi (a meno che non si inserisca readonly nel tag di input).

Quindi, ecco un esempio minimale per vedere il principio alla base:
(avrai bisogno di jQuery per il meccanismo di clic) :

  ... 

Ecco il violino con altri stili (in realtà troppo):

https://jsfiddle.net/7ac9us70/1052/

(Di nuovo, è pieno di sfumature ed effetti solo per dimostrare le possibilità. Voglio dire, duh, non ti sto dicendo di usare il gradiente radiale per le raccolte più gli elementi animati al passaggio del mouse! Ho un cuore!)

Si noti come i tag non incapsulino le opzioni che appartengono ad essi come dovrebbero normalmente; sì questo è intenzionale, è per lo stile (il modo ben educato sarebbe molto meno stylable). E sì, funzionano perfettamente in questo modo.

Dì all’elemento opzione di essere 13pt

 select option{ font-size: 13pt; } 

e quindi il primo elemento dell’opzione deve essere 7pt

 select option:first-child { font-size: 7pt; } 

Esecuzione della demo: http://jsfiddle.net/VggvD/1/

controlla questo violino,

Ho appena modificato il violino sopra, funziona

http://jsfiddle.net/narensrinivasans/FpNxn/1/

 .selectDefault, .selectDiv option { font-family:arial; font-size:12px; } 
 select[value="value"]{ background-color: red; padding: 3px; font-weight:bold; } 

prova questo

http://jsfiddle.net/VggvD/2/

CSS aggiungi il tuo codice

 .select_join option{ font-size:13px; }