En ocasiones cuando estamos diseñando una página web y queremos dar la opción de que cambie "X" elemento de nuestro diseño podemos poner un select común que solo contenga el nobre del color, pero porque no hacerlo dandole fondo a cada elemento del select?, esto es muy sencillo utilizando Css.

Código CSS:

PLAIN TEXT
CSS:
  1. body{
  2. background-color:#666666;
  3. color:#FFFFFF;
  4. text-align:center;
  5. }
  6. /*Para definir las clases se coloca un punto delante del nombre*/
  7. .azul {
  8. background-color: #0000FF;
  9. color: #ffffff;
  10. }
  11. .rojo {
  12. background-color: #FF0000;
  13. color: #ffffff;
  14. }
  15. .verde {
  16. background-color: #009900;
  17. color: #ffffff;
  18. }
  19. .amarillo{
  20. background-color: #FFFF00;
  21. color: #000000;
  22. }

Código HTML:

PLAIN TEXT
HTML:
  1. <form method="post" action="">
  2. <label for="color">Selecciona tu color favorito:</label>
  4. <select name="color" id="color">
  5. <option value="">Selecciona Uno</option>
  6. <option value="amarillo" class="amarillo">amarillo</option>
  7. <option value="rojo" class="rojo">rojo</option>
  8. <option value="verde" class="verde">verde</option>
  9. <option value="azul" class="azul">azul</option>
  10. </select>
  11. </p>
  13. <input type="submit" name="submit" id="submit"
  14. value="Enviar!" />
  15. </p>
  16. </form>