Como dar estilo a un select con css

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Jueves, 30 Junio 2011 15:55; Escrito por cybnet; Visto: 8261

Las hojas de estilo css nos ofrece infinidad de opciones para dar estilo a cualquier elemento html y los elementos de un select no van a ser menos. He dicho a los elementos de un select, esto es, las opciones seleccionables del campo select. El estilo del elemento select en sí es controlado por cada navegador y no se puede cambiar completamente (salvo usando javascrit).

Bien empezemos. Para estilo al select definiremos el css como se hace para cualquier otro tag html, por ejemplo:

select { 
  font-family: Georgia;
  font-size: 16px;
  color: #888;
  background-color:#f6f6f6;
}

Ahora se puede hacer los mismo para definir el estilo de las opciones. Primero una regla css para el estilo general de todos las opciones:

option { 
  font-family: Georgica;
  font-size: 16px;
  color: #888;
  background-color:#f6f6f6;
}

Podemos poner un estilo diferente a cada opción (a cada tag option) aplicando clases. Por ejemplo:

option.impar {background-color: #fff}
option.par {background-color: #f6f6f6}

Y, lógicamente, tendríamos que aplicar las clases a los tag option en el html:

<select>
 <option class="impar">Opción 1</option>
 <option class="par">Opción 2</option>
 <option class="impar">Opción 3</option>
 <option class="par">Opción 4</option>
 <option class="impar">Opción 5</option>
 <option class="par">Opción 6</option>
</select>

Habrás notado que el estilo que apliqué en el ejemplo al campo select es el mismo que apliqué de forma general a todos los tags option. Esto es necesario hacerlo para algunos navegadores por lo que lo mejor es hacerlo siempre para maximizar compatilibilidad entre distintos navegadores.

+1 -1 Reportar

Comentarios (9)

RSS

Rodrick

(19.01.2012 (15:48:33))

Gracias :D

Citar

cybnet

(20.12.2011 (10:43:48))

Saludos tales, actualmente la flecha del select no se puede cambiar con css. Lo que comentas son formas de "esconder" la flecha y que se vea la imagen de una flecha que quieras o usar javascript para "simular" un select utlizando una lista (lo que ya no es objeto del post).

De ellas, si no quieres usar javascript para conseguir este efecto la mejor para mí es la primera opción que comentas aunque aquí hay que implementar css específicos de cada navegador para que funcione 100% correcto en todos.

Citar

tales

(20.12.2011 (05:07:10))

Alternativas

Creo que le falta al artículo, lo que realmente quiero hacer es evitar que aparezca el botón con la flechita del select y ponerle una personalizada.

Al no poder encontrar tan fácilmente lo que quería porque siempre me encontraba con éste tipo de artículos (incompletos) me toco coger el firebug y empezar con páginas que tuvieran lo que quería.

He visto varias alternativas, voy a dar las ideas, no entrare en detalle:

1. Un div con overflow:hidden que sera menos ancho que el select, para así ocultar esa flechita.
http://bavotasan.com/2011/style-select-box-using-only-css/

2. Otra es usar opacity en el select y poner div detras con el diseño del select y el correspondiente texto (que sería cambiado mediante jquery)

3. "Simulación completa". Una lista oculta <ul> dentro de un div contenedor de overflow:scroll que sera posicionada absolutamente cuando le demos a un div que simulara también ser un select. El jquery seleccionara la opción en un select real oculto para luego enviar el formulario. (Qué enredo)

4. Usar los css de cada navegador. Aunque no me gusta ésta opción por las incompatibilidades que he visto. (-moz-appearance:none y -webkit-appearance:none)

Suerte, me voy a probar la del opacity xD

Citar

Edwin

(27.11.2011 (13:44:30))

esta bien

falta un ejemplo pero el articulo esta muy bien

Citar

Mariano

(26.10.2011 (17:31:25))

Dejalo al inutil ese

Citando "cybnet" :

Bueno, es tu opinión subjetiva, pues creo que la gente que llega a este artículo desde google con busquedas como "css select" o "estilo opciones select", entre otras busquedas a través de las que llegan aquí, lo pueden encontrar útil.

Yo busqué como decis vos... desde Google, y me sirvió, no tiene la cara ni siquiera para poner su nombre, es un troll... es un imbécil desagradecido! seguro hasta le sirvió! y si no lo necesita, para que carajo comenta!?
No les des bola a esta gente y seguí ayudando! :)

Citar

cybnet

(30.09.2011 (19:11:42))

Bueno, es tu opinión subjetiva, pues creo que la gente que llega a este artículo desde google con busquedas como "css select" o "estilo opciones select", entre otras busquedas a través de las que llegan aquí, lo pueden encontrar útil.

Citar

hgfhf

(30.09.2011 (17:30:54))

gdfgd

articulo absurdo

Citar

cybnet

(30.06.2011 (15:56:30))

Gracias una vez más x-jim, voy a tener que ponerme las pilas con los errores tipográficos tontos!!!

Citar

x-jim

(30.06.2011 (11:12:46))