Hey me han buscado muchas veces que la forma de crear un elemento de selección como la siguiente imagenCómo personalizar elemento seleccionado a través de css?
Mi código es
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
Este está disponible en jQuery, pero quiero usar CSS puro.
Gracias de antemano ....
ver su menú de selección basado en CSS y se puede personalizar: - http://jsfiddle.net/XxkSC/553/
HTML
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
solo hay un problema con el código anterior y es cuando se hace clic en la flecha "nueva" no pasa nada. Aparte de eso, esta es una gran solución. – hitautodestruct
Se agregó 'pointer-events: none;' para generar clics en la flecha, por lo que al hacer clic funciona como se esperaba. –
option{
background-image:url(image.png);
background-repeat: no-repeat;
}
No hay manera de personalizar el selecto como se ve en su pantalla sin Javascript.
Puede ver en this example que puede personalizar los colores, el relleno y los bordes, pero no el botón en sí.
Aunque agregó una imagen de fondo a la casilla de selección, no puede ocultar ese controlador en el lado derecho. Yo recomendaría usar esto: http://jamielottering.github.com/DropKick/
Solo tiene que modificar un poco el CSS para adaptarlo a sus necesidades.
que acaba de tratar este ..custom-styling-of-the-select-elements..
Aquí se selecciona completamente personalizable, se basa en las entradas de radio. http://jsfiddle.net/Idered/LufkN/
El código debe proporcionarse directamente en la respuesta, en caso de que el enlace externo no esté disponible. – Blazemonger
si usted quiere algo que funcione en todos los principales de navegación incluyen IE7 y por encima de puede utilizar mi costumbre seleccionar https://github.com/yanivsuzana/new_select
No se puede agregar un comentario a Shailender Arora, así que escribí aquí Utilizando el pointer-events:none; que le permitirá hacer clic a través de la flecha y se activará el campo de selección, así que el CSS se vería así para ese elemento
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events:none;
}
tuve un problema similar, he creado un plugin de jQuery fuera de él. Básicamente, le permite personalizar la apariencia de la caja de selección, pero manteniendo el diseño universal para dispositivos táctiles que obtuvieron un buen soporte para ciertos menús desplegables. Aquí está la página de github: https://github.com/peec/udselect
No estoy seguro de lo que estás preguntando. ¿Quieres una imagen detrás de cada una de las opciones de selección? – Miles
@Miles sí, quiero imágenes de fondo en las opciones de selección, si es posible en css puro ...? –
Desaconseja el uso del dropkick debido a la cuestión de los anchos: http: // stackoverflow.com/questions/11769888/how-to-individual-target-multiple-dropdowns-in-css-for-dropkick-plug-in – user1318135