2

Tengo el siguiente CSS y código HTML :

#select_vista {
        font-weight: bold;
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        padding:10px;
        margin:-5px -20px -5px -5px;
        user-select: none;
     }

     #select_vista option:hover{
        box-shadow: 0 0 10px 100px #70b6df inset;
        transition: all .5s ease-in-out;
     }

    #opciones_contadores select option {
        display:inline-block;
        background-color: #0065BD;
        transition-duration: 0.3s;
        color: white;
        font-size: 20px;
        padding: 20px 5px;
    }
    #opciones_contadores {
        display:inline-block;
        vertical-align:top;
        overflow:hidden;
    }
<div id="opciones_contadores">
            <select id="select_vista" size="3">
                <option value="1" selected>Lecturas</option>
                <option value="2">Consumos</option>
                <option value="3">Eventos</option>
            </select>
</div>

Lo que necesito es poner en azul y en negrita la opción que selecciono.

Ahora mismo podéis ver que se pone en gris cuando se pierde el foco del <select>.

He probado bastantes cosas, pero no me funciona nada.

2
  • 1
    ¿Qué has probado?
    – franmost
    Commented el 6 ago. 2021 a las 7:27
  • Exactamente no lo sé, pero he probado usando cada opcion y clase definida
    – ImSilent
    Commented el 6 ago. 2021 a las 7:29

1 respuesta 1

3

Tras dar una primera solución indicando que se debe usar la pseudo-clase :checked, comprobamos que existe un estilo interno del navegador que vuelve el fondo gris cuando el control pierde el foco.

No he conseguido cambiar el estilo ni mediante estilos ni con javascript, esperando al evento blur ni focusout.

Finalmente prefiero mostrar un método alternativo de hacer el mismo trabajo usando CSS e <input type="radio">. Proporciona la misma funcionalidad, la selección de un único elemento de un campo del formulario, haciendo uso únicamente de CSS.

La única complejidad que debes agregar a tu código es la de generar un identificador a cada <input> para poder relacionar un <input> con el <label> que contendrá el texto de la selección y recibirá los eventos de selección.

Con esta solución los estilos CSS deben aplicarse a las etiquetas <label>. Cuando deseas cambiar el estilo de la etiqueta asociada a un elemento seleccionado (pseudo-clase :checked) debes usar el selector de hermanos adyaccentes (+) para que el estilo se aplique a la etiqueta que está a su lado, y no al <input> en sí mismo.

Aquí tienes un ejemplo funcionando con esta solución:

/* No queremos que las bolitas se vean */
#select_vista input {
  display: none;
}

/* Permitimos que los elementos contiguos colapsen */
#select_vista {
  font-size: 0;
}

/* Estilo por defecto de las opciones */
#select_vista label {
  display: inline-block;
  background-color: #2085FD;
  padding: 20px 5px;
  width: 5em;
  text-align: center;
  transition: all .5s ease-in-out;
  font-size: 20px;
}

/* Estilo al pasar por encima */
#select_vista label:hover {
  background-color: #0065BD;
  color: white;
  font-weight: bold;
}

/* Estilo de la opción marcada */
#select_vista input:checked + label {
  background-color: #0065BD;
  font-weight: bold;
}
<div id="opciones_contadores">
  <div id="select_vista">
    <input type="radio" name="select_vista" id="select_vista_1" value="1" checked />
    <label for="select_vista_1">Lecturas</label>
    <input type="radio" name="select_vista" id="select_vista_2" value="2" />
    <label for="select_vista_2">Consumos</label>
    <input type="radio" name="select_vista" id="select_vista_3" value="3" />
    <label for="select_vista_3">Eventos</label>
  </div>
</div>

10
  • Y como hago para que no siga saliendo en gris ?¿
    – ImSilent
    Commented el 6 ago. 2021 a las 7:32
  • ¿El qué debe seguir siendo gris? Commented el 6 ago. 2021 a las 7:33
  • Si te fijas, cuando ejecutas el código y tienes una opción seleccionada, al dar un par de clic sueltos por la vista, la opcion seleccionada, sale marcada en gris. Y yo quiero cambiar ese color por un blanco por ejemplo.
    – ImSilent
    Commented el 6 ago. 2021 a las 7:36
  • Ahh, vale, es debido a que se está "plegando" el select y vuelve a su estilo por defecto. Al cambiarle la apariencia se está comportando de manera diferente al resto de componentes. Lo consulto y luego edito la respuesta. Commented el 6 ago. 2021 a las 7:42
  • Estoy viendo que cuando el <select> pierde el foco entra en funcionamiento un estilo que deja la opción marcada en gris. El selector parece ser select:-internal-list-box option:checked, y parece que no se puede sobreescribir o cambiar. Commented el 6 ago. 2021 a las 7:55

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.