¿Cómo puedo cambiar el tamaño de letra de una opción de selección?

Estoy intentando diseñar una lista desplegable de opciones de selección. ¿Es posible hacer que los tamaños de fuente de las opciones sean diferentes del valor predeterminado? Por ejemplo, el valor predeterminado:

-- Select Country -- 

Sería el tamaño 7pt; y una de las opciones,

 Georgia 

Sería tamaño 13pt.

Esta es mi lista desplegable:

 .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

Ver también mi demo en JSFiddle .

Desafortunadamente, solo funciona en Firefox. ¿Podría ser que otros navegadores no sean compatibles con el estilo de los elementos ?

Navegadores que probé en:

  • Chrome: versión 27.0.1453.116 m
  • IE: 10
  • Firefox: 22.0

Agregue una clase de CSS a la etiqueta para darle un estilo: http://jsfiddle.net/Ahreu/

Actualmente, los navegadores WebKit no admiten este comportamiento, ya que no está definido por la especificación. Eche un vistazo a esto: ¿Cómo diseñar el elemento de opción de una etiqueta de selección?

Es factible pero complicado.

Las opciones normales de selección desplegable no aceptarán estilos. PERO. Si hay un parámetro de “tamaño” en la etiqueta, se aplicará casi cualquier CSS. Usando este truco, he creado un violín que es prácticamente equivalente a una etiqueta de selección normal, además de que el valor se puede editar manualmente como un ComboBox en los lenguajes visuales (a menos que lo pongas solo en la etiqueta de entrada).

Así que aquí hay un ejemplo mínimo para ver el principio detrás:
(necesitará jQuery para el mecanismo de clics) :

  ... 

Aquí está el violín con algunos estilos más (en realidad demasiado):

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

(Una vez más, está repleto de gradientes y efectos solo para demostrar las posibilidades. Quiero decir, duh, ¡no te estoy diciendo que uses gradiente radial para los grupos más los elementos animados!) ¡Tengo un corazón!)

Observe cómo las tags no encapsulan las opciones que pertenecen a ellas como deberían; sí, esto es intencional, es para el estilo (la forma educada sería mucho menos flexible). Y sí, funcionan perfectamente de esta manera.

Dile al elemento de opción que sea 13pt

 select option{ font-size: 13pt; } 

y luego el primer elemento de opción para ser 7pt

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

Ejecución de demostración: http://jsfiddle.net/VggvD/1/

mira este violín

Acabo de editar el violín anterior, funciona

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; } 

prueba esto

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

CSS agrega tu código

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