1

Tengo un select que me muestra una lista de colores, ya logre colocar los colores en las letras y un icono de fontawesone en cuadrado, pero mi problema viene cuando selecciono un elemento de la lista me pone en negro las letras y también el cuadro como podría hacer para que cuando seleccione me pinte como esta en la lista la letra y el icono del color seleccionado. Gracias. debajo pongo el codigo, estoy usando bootstrap.

<div class="form-group">
                <label for="color" class="col-form-label font-weight-bold">Color:</label>                   
                <select class="form-control fa" name="color" id="color" required>
                    <option value="">Seleccionar</option>
                    <option class="fa" style="color:#0071c5;" value="#0071c5">&#xf0c8; Azul Oscuro</option>
                    <option class="fa" style="color:#40E0D0;" value="#40E0D0">&#xf0c8; Turquesa</option>
                    <option class="fa" style="color:#008000;" value="#008000">&#xf0c8; Verde</option>
                    <option class="fa" style="color:#FFD700;" value="#FFD700">&#xf0c8; Amarillo</option>
                    <option class="fa" style="color:#FF8C00;" value="#FF8C00">&#xf0c8; Naranja</option>
                    <option class="fa" style="color:#FF0000;" value="#FF0000">&#xf0c8; Rojo</option>
                    <option class="fa" style="color:#000000;" value="#000000">&#xf0c8; Negro</option>
                </select>
            </div>
0

1 respuesta 1

1

Ya que el valor de los options son el color de cada option, puedes usar a esos valores para aplicar el estilo al select y cambiarle de color, es decir, si escoges el option cuyo valor es el color naranja, ese valor (el color naranja) será el color del select:

onchange="this.style.color=this.value"

Tu código sería el siguiente:

body {
  padding: 0 24px;
  background-color: #fff;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-group">
  <label for="color" class="col-form-label font-weight-bold">Color:</label>                   
  <select class="form-control fa" onchange="this.style.color=this.value" name="color" id="color" required>
    <option value="">Seleccionar</option>
    <option class="fa" style="color:#0071c5;" value="#0071c5">&#xf0c8; Azul Oscuro</option>
    <option class="fa" style="color:#40E0D0;" value="#40E0D0">&#xf0c8; Turquesa</option>
    <option class="fa" style="color:#008000;" value="#008000">&#xf0c8; Verde</option>
    <option class="fa" style="color:#FFD700;" value="#FFD700">&#xf0c8; Amarillo</option>
    <option class="fa" style="color:#FF8C00;" value="#FF8C00">&#xf0c8; Naranja</option>
    <option class="fa" style="color:#FF0000;" value="#FF0000">&#xf0c8; Rojo</option>
    <option class="fa" style="color:#000000;" value="#000000">&#xf0c8; Negro</option>
  </select>
</div>

1
  • Muchas gracias por tu ayuda me soluciono el problema ahora si puedo seleccionar un color y ver el icono en el select de ese color pero el problema ahora es que me ha cambiado el font a otro estilo como podria resolver ello?? Commented el 30 nov. 2022 a las 19:07

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.