CSS: Estilo HTML <seleccione> de selección múltiple de elementos

Estoy usando algunos <select row="3" multiple="multiple"> elementos en una página.

He estado tratando de estilo de ellos, de modo que el texto en el interior coincide con el resto de la página.

Empecé con el cambio de la fuente (select {font-family: 'foo';}). Pero, necesito un aumento de tamaño de fuente y la línea-altura de la fuente nueva. Y no me deja cambiar eso. He intentado usar estilos en línea, el estilo de la select, y el estilo de la options.

¿Cómo puedo cambiar las propiedades como font-size y line-height dentro de un <select> cuadro?

Has probado a cambiar los estilos en la opción elementos de sí mismos? También, los resultados probablemente variará entre los navegadores.
He. Sí, estoy esperando el navegador de diferenciación; sólo estoy buscando una aproximación.

InformationsquelleAutor Nathan | 2011-07-17

3 Comentarios

4

Por desgracia, no todos los navegadores le permiten cambiar el diseño de SELECCIONAR o la tecla OPCIÓN artículos.

Se podría decir que quizás sea mejor dejar el estilo de los cuadros de selección, optgroup y opciones solo y simplemente dejarlos como los valores predeterminados porque los navegadores estilo es tan incoherente que no vale la pena molestarse.

Buena página web que explica las cosas que PUEDE ser de estilo es el siguiente: Tabla que contiene toda la información que usted necesita.

Tu HTML:
```
<select multiple="multiple">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
</select>
```
Tu CSS (ejemplo):
```
select {
    font-family: 'Times New Roman';
}

select option {
    background-color: #FFFF00;
    color: #FF0000;
}
```
- relleno y tamaño de fuente no funcionan. Al menos en chrome
- Añadido a jsfiddle: jsfiddle.net/5TJmy — En Chrome en windows Vista (sí, de verdad!), el tamaño de fuente y el relleno no son respetados. Son capaces de cambiar el relleno y tamaño de fuente en su configuración?
- Gracias por el enlace a la tabla. Supongo que es imposible…
InformationsquelleAutor Jules
1

Resultados pueden ser OS dependientes así como explorador-dependiente. Aunque los estilos CSS se puede aplicar para seleccionar los elementos y opciones, puedo ver que algunos navegadores (sobre todo las antiguas) podría diferir con el sistema operativo para mostrar estos widgets.

Esta es una pregunta similar a Cómo el estilo de un <seleccione> menú desplegable con CSS, sin JavaScript?.
- Sí, estoy esperando el navegador de diferenciación; sólo estoy buscando una aproximación. Yo no estoy usando navegadores antiguos! También, el vinculado pregunta es para menús desplegables, que parece que son mucho más styleable…
- Cierto, buen punto de curso. Pero son similares en el sentido que se OS widgets, e incluso nuevos navegadores son libres de ignorar sus estilos. Yo probablemente no debería haber vinculadas a una vieja pregunta, pero el sentimiento creo que todavía es válida. Estoy pensando que podría tener para hacerte el tuyo propio. Hay un montón de plugins JS y puro css soluciones para los menús y los cuadros de lista y listas desplegables. Buena suerte!
InformationsquelleAutor Ray Toal
0

Estoy asombrado de que nadie ha mencionado Elegido todavía.

Elegido es un plugin de jQuery que hace largo, pesado cuadros de selección mucho más amigable para el usuario.

Todos los equipos de escritorio modernos navegadores (Firefox, Chrome, Safari y IE9). Legado de soporte para IE8 también está habilitada. Elegido está deshabilitado en el iPhone, iPod Touch y dispositivos móviles Android.

Porque reemplaza el elemento select con un div y luego une a todos los eventos entre los dos, usted puede estilo de sin embargo que así lo deseen y que todavía va a reaccionar como si se tratara de un normal de la casilla. Bastante fresco.

InformationsquelleAutor Matt Fletcher

3 Comentarios

Dejar respuesta Cancelar respuesta