Entrar ¿Aún no tienes acceso?
2
respuestas

Dar estilo a la opción selected de un fieldset de tipo select

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Mejorando la semántica y actividad Haz lo que hicimos en el aula

por Rosana Mabel Gómez
| 31.7k xp | 12 posts
Empleada

Tengo este problema:Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadLa opción que aparece preseleccionada no toma el estilo (que forcé al absurdo para realzar la diferencia) que tienen las opciones en el menú desplegable. El menú desplegable refleja el color y tamaño de la fuente, pero además le agregué un padding enorme, que no está ni por casualidad. Este es mi código html:

<fieldset>
                <legend>¿En cuál horario prefiere ser atendido?</legend>
                <select>
                    <option>Mañana</option>
                    <option selected>Tarde</option>
                    <option>Noche</option>
                </select>
            </fieldset>

y este es mi css

option{
    color: red;
    font-size: 40px;
    padding: 40px;
}

option:selected {
    color: red;
    font-size: 40px;
    padding: 40px;
}

También probé poniéndole un class al fieldset y anteponíendolo a option: .classX select option, .classX option, .classX select option:selected, .classX option:selected, y hasta .classX select option:checked; por las dudas. Pero el resultado fue el mismo o peor. Alguien sabe como darle estilo a la opción que aparece selected y por qué no acepta el padding en ningún momento?

2 respuestas
por W. Vanegas
| 141.9k xp | 4 posts

Hola, espero que esto te ayude.

No todos los navegadores soportan los estilos para el elemento option, los que lo hacen permiten modificar algunas propiedades como por ejemplo color o background-color. Ten en cuenta que los estilos solo se aplicarán en los navegadores que soporten esta característica.

Puedes probar usando checked para cambiar algunos estilos cuando selecciones una opción. 

option{
    color: red;
    font-size: 40px;
}

option:checked {
    color: white;
    background-color: red;
    font-size: 20px;
}

o puedes usar default para dar estilos al elemento option que tenga el atributo selected.

option{
    color: red;
    font-size: 40px;
}

option:default {
    color: white;
    background-color: red;
    font-size: 20px;
}

Respecto al padding, puede modificarlo, pero debes tener en cuenta si el navegor permite modificar esta propiedad para el elemento option (la mayoría no lo hace) y también como funciona esta propiedad dependiendo del display que tenga el elemento, en este caso el elemento option tiene un display: inline; por defecto.

Para conocer más sobre la propiedad display puedes revisar estos links:

por Rosana Mabel Gómez
| 31.7k xp | 12 posts
Empleada

Gracias, mil gracias por tu ayuda, muy completa tu respuesta.