2

No puedo cambiar el fondo del desplegable de un select. El background-color en el select le da estilo cuando éste no está activado, y el darle background-color a las options hace que se vea horrible, no estila el desplegable completo. Dejo ejemplo de lo que hice y como quedó

<select style="left: 19.9%; border: solid 2px #a21b1b71;" class="position-relative mb-3 font-josefin-sans bordeaux-color bg-light-black" name="edad" id="">
                            <option style="background-color: black;" value="" disabled selected>Edad</option>
                            <option style="background-color: black;" value="niño">Menor de 15 años</option>
                            <option style="background-color: black;" value="adolescente">Entre 15 y 19 años</option>
                            <option style="background-color: black;" value="joven">Entre 20 y 28 años</option>
                            <option style="background-color: black;" value="adulto">Entre 29 y 45 años</option>
                            <option style="background-color: black;" value="adultoMayor">Más de 45 años</option>
                        </select>

Y así de feo me queda:

introducir la descripción de la imagen aquí

Como ven queda la opción deshabilitada y una parte al final sin el color.

Ignorar lo feo que pueda estar mi código, recién arranco en esto!

Gracias

1 respuesta 1

1

Puedes usar el selector

select option {}

o el sub selector de atributo

select option[value="adolecente"] {
  background: rgba(100, 100, 100, 0.3);
}

lo mismo para el "disabled"

select option:disabled { /* estilos... */}

y tu html

<select style="left: 19.9%; border: solid 2px #a21b1b71;" class="position-relative mb-3 font-josefin-sans bordeaux-color bg-light-black" name="edad" id="">
    <option value="" disabled selected>Edad</option>
    <option value="niño">Menor de 15 años</option>
    <option value="adolescente">Entre 15 y 19 años</option>
    <option value="joven">Entre 20 y 28 años</option>
    <option value="adulto">Entre 29 y 45 años</option>
    <option value="adultoMayor">Más de 45 años</option>
</select>

Puedes checar un ejemplo aquí

y si te refieres al borde gris te recomiendo uses un "css reset"

1
  • Muchas gracias! miré el ejemplo y simplemente probando con "background" en vez de "background-color" me quedó bien. Graciaaaas :) Commented el 24 ago. 2021 a las 15:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.