¿Cómo doy estilo a las listas desplegables de formularios?

Question

He buscado a lo largo y ancho de Internet pero no he encontrado nada útil con respecto a cómo diseñar la parte desplegable de una lista desplegable en un formulario. Apreciaría un puntero en la dirección correcta. Gracias.

Answer 1

Como se mencionó anteriormente, es casi imposible usar html directo, sin embargo, he tenido buenos resultados con jQuery Combobox.

Answer 2

Puede aplicar estilos utilizando el selector SELECT o aplicando un nombre de clase a un elemento SELECT. Sin embargo, se encontrará con problemas con IE < 8 aplicando elementos como bordes al elemento.

A continuación, puede orientar las opciones utilizando el selector OPTION.

SELECT { border: solid 1px red; font-weight: bold; } 
OPTION { background:green; font-style: italic; } 

deben darle un menú desplegable con un borde rojo (si se utiliza FF o IE8 en modo estándar) con el texto en negrita, y las opciones deben ser cursiva con un fondo verde.

Answer 3

Es posible, pero intrincado por decir lo menos. En realidad, no se puede aplicar estilo a la parte desplegable de una lista desplegable de forma consistente en diferentes navegadores, ya que todos los admiten de diferentes maneras (me refiero a una compatibilidad muy variada).

Cuando tuve un problema como este hace unos meses, la única solución que encontré fue, mediante javascript, convertir la lista desplegable en un menú desplegable ul/li, que podría dar estilo. Por supuesto, hay numerosos eventos que necesitan manejo, como seleccionar un valor.

Afortunadamente, hay un complemento para JQuery que permite que esta sea una tarea trivial. (El enlace Brainfault dado para este complemento ya no funciona).

Answer 4

He estado trabajando en el mismo problema por un tiempo. Llenar con una solución bastante simple con un titular div que es más corto que el menú desplegable. También uso una imagen de fondo para que la flecha de los desplegables se vea como a mí me gusta. Verifique http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Todo lo que necesita es un div alrededor de la etiqueta de selección y 2 clases de CSS.

HTML:

<div class="mainselection"> 
<select name="State" id="input7"> 
    <option></option> 
    <option value="Alabama">Alabama</option> 
    ... 
    <option value="Wisconsin">Wisconsin</option> 
    <option value="Wyoming">Wyoming</option>        
</select> 
</div> 

CSS:

.mainselection { 
    overflow:hidden; 
    width:350px; 
    margin-left:35px; 
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px; 
    /* dropdown_arrow.png is a 31x28 image */ 
} 
select { 
    border:0; 
    background:transparent; 
    height:32px; 
    border:1px solid #d8d8d8; 
    width:350px; 
    -webkit-appearance: none; 
} 

Luego, después de un poco de verificación de Javascript, que puede también cambiar la clase en el div a .dropdownbad para darle un borde rojo.

.dropdownbad { 
    border:2px solid #c13339; 
} 

Los estados por defecto y error se muestran aquí:

Answer 5

Desde que se hizo esta pregunta, la tecnología del navegador ha mejorado mucho. Ahora puede crear un menú desplegable personalizado usando CSS sin javascript.

Salida esta entrada del blog: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 6

tengo menús desplegables en mi carro que eran de color gris claro si no se selecciona.Yo era capaz de convertir el texto negro con esto:

#customer_details ul { 
color: black !important; 
} 

Eso era todo lo que tenía que cambiar, así que no puedo decir qué más se podía hacer.

Answer 7

Salida este sitio web por sólo CSS solución: http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML:

<form> 
    <select> 
     <option>CSS</option> 
     <option>HTML </option> 
     <option>HTML 5</option> 
    </select> 
</form> 

CSS:

<style> 
    select { 
     border: 0 !important; /*Removes border*/ 
     -webkit-appearance: none; /*Removes default chrome and safari style*/ 
     -moz-appearance: none; /* Removes Default Firefox style*/ 
     background: #0088cc url(img/select-arrow.png) no-repeat 90% center; 
     width: 100px; /*Width of select dropdown to give space for arrow image*/ 
     text-indent: 0.01px; /* Removes default arrow from firefox*/ 
     text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
     color: #FFF; 
     border-radius: 15px; 
     padding: 5px; 
     box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
    } 
</style>