Personalizar DropDownList de ASP o los SELECT de HTML

Personalizar DropDownList de ASP o los SELECT de HTML

Personalizar DropDownList de ASP o los SELECT de
HTML
Hola amigos, les traigo una manera muy muy sencilla de personalizar las listas
desplegables bien sean <select> de html o los <asp:dropdownlist> vamos a
trabajar con css y aquí vamos.
En el css pondremos
.styled-select select {
background: transparent;
width: 222px;
padding: 5px;
font-size: 12px;
line-height: 1;
border-radius: 4px;
border: 0;
border-radius: 0;
height: 22px;
-webkit-appearance: none;
}
.styled-select {
width: 222px;
height: 22px;
overflow: hidden;
background: url(../imagenes/tuimagen.png) no-repeat right #f6f6f6;
border-radius: 4px;
border: 1px solid #ccc;
position:absolute;
top: 204px;
left: 6px;
}
//La imagen que usaremos será una flecha que te guste en mi caso la
flecha que elegí es esta
//
Básicamente hicimos una división invisible que va a tener la flechita que
elegimos y el estilo que queremos darle al select resultante, dentro de esta
división pondremos nuestro select.
En el HTML
En asp:
<div class="styled-select">
<asp:DropDownList ID="operador" runat="server">
</asp:DropDownList>
</div>
Y si es en HTML se verá así:
<div class="styled-select">
<select name=”prueba”></select>
</div>
Cuando ya tengamos esto debemos ajustar el select al div el ancho debe ser el
mismo en este caso height: 22px; y el ancho unos dos pixeles más que el div
ustedes ajustaran y verán el punto exacto
El resultado en este caso será algo así
En esta propiedad elegimos la flecha pero también el color de fondo del resto
del select
background: url(../imagenes/tuimagen.png) no-repeat right #f6f6f6;
y bueno lo demás lo dejo a su imaginación
Gracias espero que les haya servido.
Samanta Cantero.
@zamdd en twitter
sigue mi blog : http://titaniumsoluciones.hol.es/