es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo establecer el background-color para

06 Aug, 2023 Programación

Estoy tratando de estilizar los elementos <select> con el atributo de background-color en el evento :hover y al mismo tiempo dejar el estilo del desplegable de las opciones <option> sin modificar. Parece que este problema solo ocurre en Firefox y no en Chrome/Safari.

Aquí está el fragmento de código. Por favor, ten en cuenta que no quiero que el desplegable se vea afectado por el background-color en Firefox. Además: no solo cambia el color de fondo, también cambian los bordes. Todo el aspecto “nativo” se pierde en cuanto le doy un background-color al select.

select {
background-color: red;
}

Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para dar estilo al background-color de un elemento select al pasar el mouse sin afectar el estilo del desplegable de opciones en Firefox, puedes utilizar la propiedad CSS -moz-appearance: none;. Esto eliminará el estilo predeterminado del elemento select en Firefox y nos permitirá agregar nuestro propio estilo personalizado:

    select {
  -moz-appearance: none; /* eliminar estilo predeterminado de Firefox */
  background-color: white; /* establecer color de fondo para el estado sin pasar el mouse */
}

select:hover {
  background-color: lightblue; /* establecer color de fondo para el estado al pasar el mouse */
}

    Ten en cuenta que esta solución solo funciona en Firefox, ya que -moz-appearance es una propiedad CSS no estándar específica de Firefox. Para otros navegadores, es posible que debas usar prefijos de proveedores o técnicas alternativas para lograr el efecto deseado.

Comments are closed.