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.