¿Transforma el texto: capitaliza el trabajo para los elementos <option> y, en caso afirmativo, en qué navegadores?

Question

Tengo un elemento <select> dentro del cual me gustaría Capitalizar el texto que se muestra en cada etiqueta <option>.

Por ejemplo, me gustaría que los 2 valores aquí para ser Bar y Baz (no barra y Baz)

<style> 
    option { text-transform: Capitalize; } 
</style> 

<select name="foo"> 
    <option value="bar">bar</option> 
    <option value="baz">baz</option> 
</select> 

Esto no parece funcionar en mi Chrome (14.0.835.202) pero funciona en mi Firefox (8.0) e IE 8.

Editar: Añadido <style> etiqueta para mayor claridad

Answer 1

Como han mencionado otros, actualmente a bug in Chrome. El código siguiente es la forma correcta de hacer lo que estás preguntando:

select option {text-transform:capitalize} 

Aquí está a working fiddle to demonstrate (vista en algo que no sea Chrome)

Información adicional:

creo que estará También descubres que el método anterior tampoco funciona en Safari. Si desea una solución entre navegadores, JavaScript será su única opción.

Si usted está abierto a él, aquí hay un ejemplo simple de jQuery:

$("option").each(function() { 
    $(this).text($(this).text().charAt(0).toUpperCase() + $(this).text().slice(1)); 
}); 

Y a working fiddle.

Answer 2

Se puede usar un pequeño script jQuery para que funcione en Chrome también:

http://jsfiddle.net/p6wbf/1/

Answer 3

Esto funciona en todos los navegadores:

select {text-transform:capitalize}