4

Como podría cambiar el color por defecto del selector (azul claro) cuando paso el ratón por encima, querría ponerlo en rojo por ejemplo:

.dropdown {
  color: #002E6D !important;
}
<select class="dropdown">
   <option selected></option>
   <option value="1">Adornos de cerámica, estatuillas</option>
   <option value="2">Adornos para fiestas de Navidad</option>
   <option value="3">Agujas de coser, punto, imperdibles</option>
</select>

Resultado actual

Selector

Necesidad

introducir la descripción de la imagen aquí

4
  • 1
    Para algo como lo que querés hacer, vas a tener que armar tu propio select. El elemento select de html ya trae esa lista que cada navegador renderiza a su manera. Para armar lo que queres deberias hacer un div que tenga un boton, y al presionar dicho boton se despliegue otro div más grande con una lista de elementos en su interior. Ahi podes meterle css a cada elemento (<li>), al div selector y al boton de dropdown. De la otra forma es super tedioso y solo vas a poder editar el input y la flecha, no así el contenido del desplegable
    – Agustin G.
    el 10 ago. 2021 a las 12:55
  • 2
    Lo que dice @AgustinG. es cierto. Hay ciertos estilos por defecto (internos del navegador) para este tipo de controles no se pueden socreescribir. Todo lo que encuentres será implementando la misma funcionalidad a través de otro sistema, por ejemplo como el que te ha propuesto (aunque hay otras opciones). el 10 ago. 2021 a las 13:39
  • Gracias @AgustinG. le echaré un vistazo. Tengo que reescribir un par de cosas pero he captado la idea ;)
    – colidom
    el 10 ago. 2021 a las 14:30
  • 1
    @CarlosJ.OlivaDomínguez como bien te dice OscarGarcia, existen multiples maneras y dudo mucho que la mia sea la más óptima, pero te va a pasar, generalmente con esta clase de inputs, con los checkbox, entre otras cosas que el navegador no permite estilizar y la mejor alternativa será buscar en la web de qué maneras lo han resuelto, siempre vas a encontrar algo que se ajuste a tus necesidades. Inclusive si usas algun framework en lugar de html puro, podrias hacer algo asi con menos de 10 lineas de código.
    – Agustin G.
    el 10 ago. 2021 a las 17:08

1 respuesta 1

3

Para que te orientes un poco, a esto me refiero cuando te digo que deberias armar tu propio select, con un poco de css y jquery se consigue lo que buscás. Ahora solo faltaria hacer la funcion que, al seleccionar un elemento de la lista, este se coloque en el select input en lugar de "Hola Desplegame" y se cierre la lista.

$("#select-button").click(()=>{
  $("#select-content").hasClass("open") 
    ?
      $("#select-content").removeClass("open")
    :
      $("#select-content").addClass("open")
})
#select-input{
  border:1px solid black;
  width:200px;
  padding:4px;
  position:relative;
  text-align:center;
}
#select-content{
  max-height:0px;
  width: 200px;
  text-align:center;
  color:red;
  overflow:hidden;
  transition: .3s ease all;
}

#select-content.open{
  max-height: 100px;
  transition: .3s ease all;
  border:red 1px solid;
}

#select-list{
  list-style-type: none;
  padding:0;
  margin:0;
}
#select-list > li{
  padding:4px;
}
#select-list > li:hover {
  background-color: blue;
  transition: .3s ease all;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-input"> Hola, desplegame <button id="select-button">V</button></div>
<div id="select-content">
 <ul id="select-list">
   <li>Opcion 1</li>
   <li>Opcion 2</li>
   <li>Opcion 3</li>
 </ul>
</div>

0

Tu Respuesta

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

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