1

Tengo un Select el cual contiene 3 colores como opciones, pero cuando selecciono una opción esta no muestra el color de fondo, solo muestra el texto:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Puntos...</title>
        <style type="text/css">
            .rojo {background-color:#FF0000;}
            .azul {background-color:#0066FF;}
            .verde {background-color:#009900;}
        </style>
    </head>

    <body>
        <form action="" method="">
            <select name="opciones">
                <option class="rojo">Rojo</option>
                <option class="azul">azul</option>
                <option class="verde">Verde</option>
            </select>
        </form>
    </body>
</html>

4
  • quieres mostrarlo en el body? Commented el 15 mar. 2018 a las 16:01
  • Pero en ningún momento le estas cambiando el Background al Body. Commented el 15 mar. 2018 a las 16:02
  • asi es eso se hace con jquery Commented el 15 mar. 2018 a las 16:02
  • @SebastiánLagosYañez no quiero cambiar el color del body, lo que pasa es que en el select cuando selecciono por ejemplo el color verde cambia el background de la opcion que elegi a color blanco y no se queda en verde
    – Ivxn
    Commented el 15 mar. 2018 a las 16:10

2 respuestas 2

6

para esto es necesario utilizar javascript y manejar el evento onchange para cambiar el background del select dependiendo la opción seleccionada

agrega el siguiente código luego de la etiqueta de cierre </style>

<script>
    var e = document.getElementsByName("opciones")[0];

    e.className = e.options[e.selectedIndex].className;

    e.onchange = function(){
      e.className = e.options[e.selectedIndex].className;
    }
</script>

mira el codigo funcionando

Edit

En caso de querer utilizar el atributo style en vez de clases css deberías acceder a cada propiedad css en el style y modificar su valor

    var e = document.getElementsByName("opciones")[0];

    e.style.backgroundColor = e.options[e.selectedIndex].style.backgroundColor;

    e.onchange = function(){
      e.style.backgroundColor = e.options[e.selectedIndex].style.backgroundColor;
    }

mira el código funcionando para esta actualización

7
  • funcionaria igual si incorporo directamente el estilo a la opcion por ejemplo <option style="background-color:Red">Rojo</option>?
    – Ivxn
    Commented el 15 mar. 2018 a las 16:26
  • no funcionaria. className toma la clase (no el atributo style) que definiste en cada elemento. Commented el 15 mar. 2018 a las 16:39
  • y como puedo hacerlo de esta forma <option style="background-color:Red">Rojo</option>
    – Ivxn
    Commented el 15 mar. 2018 a las 16:44
  • 1
    como buena practica, te recomiendo utilizar las clases. el problema de los style en este caso es que debes seleccionar cada una de las propiedades que usas. por ejemplo si usas background-color, margin y padding entonces tienes que asignar cada propiedad en el select lo cual triplicarias el codigo. si lo necesitas, adapto la respuesta para los dos casos. Commented el 15 mar. 2018 a las 16:48
  • actualice mi respuesta, mi elección es utilizar nombre de clases. saludos Commented el 15 mar. 2018 a las 16:54
2

Yo lo haría con JQuery de esta manera. Espero te sirva.

var select = $("select"); // Select
// Estado inicial del Select. Agregar clase de la opción seleccionada.
select.attr("class", select.children(":selected").attr("class"));

// Al cambiar
select.change(function() {
   var selected = $(this).children(":selected").attr("class");
   $(this).attr("class", selected);
});
.rojo {
  background-color: #FF0000;
}

.azul {
  background-color: #0066FF;
}

.verde {
  background-color: #009900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="opciones" id="myselect">
    <option class="rojo">Rojo</option>
    <option class="azul">azul</option>
    <option class="verde">Verde</option>
</select>

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.