phil paz
tengo un <select> elemento dentro del cual me gustaría poner en mayúsculas el texto que se muestra en cada <option> etiqueta.
Por ejemplo, me gustaría que los 2 valores aquí fueran Bar y baz (no bar 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
colina de james
Como otros han mencionado, esto actualmente un error en Chrome. El siguiente código es la forma correcta de hacer lo que estás pidiendo:
select option {text-transform:capitalize}
Aquí está un violín de trabajo para demostrar (ver en algo que no sea Chrome)
Información adicional:
Creo que también encontrarás que el método anterior tampoco funciona en Safari. Si desea una solución de navegador cruzado, JavaScript será su única opción.
Si está abierto a ello, aquí hay un ejemplo simple de jQuery:
$("option").each(function() {
var $this = $(this);
$this.text($this.text().charAt(0).toUpperCase() + $this.text().slice(1));
});
** ACTUALIZAR **
Esta pregunta se respondió originalmente en 2011. El error mencionado anteriormente se eliminó desde entonces, y el CSS a continuación es suficiente para capitalizar cada opción en todos los navegadores.
select, select option {text-transform:capitalize}
-
Funciona si escribe ‘seleccionar’ ahora en Chrome.
– Elon Zito
16 de marzo de 2015 a las 15:03
-
funciona mejor si lo haces en ambos en realidad:
select, select option {text-transform:capitalize}– El tonto
1 de febrero de 2020 a las 15:05
-
seleccione la opción {text-transform: capitalize} que no funciona para Firefox
– código.rider
21 de diciembre de 2020 a las 6:26
-
A partir de 2022, no veo que esto funcione en Chrome para diseñar solo el
option. Puede diseñar elselectpero mi formulario usa una fuente que se ve en la marca para que los elementos del formulario tengan mayúsculas, pero elselect optionquiero sercapitalize, pero no tiene ningún efecto. Mirar en el inspector muestra la regla y no se anula, simplemente no se admite, incluso con!important.– rtpHarry
17 de marzo de 2022 a las 11:12
aswin
Esto funcionará en todos los navegadores:
select {text-transform:capitalize}
-
Este es mejor, simple y directo.
– Imrán
28 de mayo de 2013 a las 10:12
-
¿Cómo podría poner en mayúscula la primera palabra en el navegador cruzado si hay más de una en cada opción?
– Bjorn
15/10/2013 a las 11:15
-
@Marcel Respondí esto en otro hilo, busque mi respuesta aquí: stackoverflow.com/questions/15242592/…
– Código Alex
30 de abril de 2014 a las 12:29
-
Cuando está en iPhone Chrome), solo la opción seleccionada parece estar en mayúsculas, otras en el menú desplazable aún están en minúsculas.
– Mené
19 de agosto de 2016 a las 23:10
-
Esto funciona solo para el valor mostrado/elegido, pero cuando hace clic en la lista, los otros elementos no se escriben en mayúscula.
– Mehdi
26 de marzo de 2018 a las 15:40
También podría usar un pequeño script jQuery para que funcione en Chrome:
-
Funciona si escribe ‘seleccionar’ ahora en Chrome.
– Elon Zito
16 de marzo de 2015 a las 15:03
Actitud de Arpit
seleccione la opción {transformar texto: capitalizar}
Use el CSS anterior para asegurarse de que los valores de sus opciones no estén en MAYÚSCULAS. si lo son, primero bájelos usando strtolower() en PHP y el estilo funcionará perfectamente para usted.
El título de su pregunta menciona “transformación de texto: mayúsculas”, pero el texto de la pregunta no muestra cómo lo está usando. Justo
select option { text-transform: capitalize; }?– ruakh
5 de diciembre de 2011 a las 16:21
Aparentemente, este era un error continuo para Chrome y se corrigió en 16 + 17, pero no puedo verificarlo porque todavía estoy en 15: code.google.com/p/chromium/issues/detail?id=31349
– Tarwn
5 de diciembre de 2011 a las 16:22
Funciona si escribe ‘seleccionar’ ahora en Chrome.
– Elon Zito
16 de marzo de 2015 a las 15:03
Desde entonces, dejó de funcionar en FF, funciona en Chrome jsfiddle.net/dtavqsh6
– Rohan210
3 sep 2019 a las 11:43