jquery - multiple - CSS para la "flecha hacia abajo" en un elemento<seleccionar>?
jquery css width (11)
Puede lograr esto con solo CSS y su flecha hacia abajo como una imagen posicionada como absoluta con un "pointer-events: none"; mira mi ejemplo a continuación:
<select>
<option value="1">1 Person</option>
<option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />
.passthrough {
pointer-events: none;
position: absolute;
right: 0;
}
¿Es posible estilizar la flecha hacia abajo en un elemento de selección desplegable? es decir, ( <select><option>--></option></select> )
Sospecho que la respuesta es no debido a la forma en que IE maneja ese elemento en particular. Si no hay una forma, ¿alguien sabe de un cuadro desplegable ''falso'' que utiliza javaScript que imitaría ese comportamiento pero me da la posibilidad de personalizarlo?
Prueba esto
<div style=''position:relative;left:0px;top:0px;
onMouseOver=document.getElementById(''visible'').style.visibility=''visible''
id=''hidden''>10
<select style=''position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;''
onMouseOut=document.getElementById(''visible'').style.visibility=''hidden''
onChange=''this.form.submit()''
id=''visible'' multiple size=''3''>";
<option selected value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
</select>
</div>
Debería crear su propio menú desplegable usando divs ocultos y un elemento de entrada oculto para registrar qué opción fue "seleccionada". Creo que el enlace de @ Jan Hancic que publicó es probablemente lo que estás buscando.
El menú desplegable es un elemento de nivel de plataforma, no puede aplicarle CSS.
Puede superponer una imagen sobre ella usando CSS y llamar al evento click en el elemento debajo.
No puedes peinar combos muy bien usando CSS.
Los chicos de FogBugz hicieron un buen combo personalizado usando JavaScript, por lo que es posible, solo se necesita mucho trabajo para hacerlo bien.
Mejor seguir con el estándar para la versión 1, luego ver si vale la pena actualizarlo una vez que su aplicación está en libertad.
No sé si es personalizable con CSS (probablemente no en IE), pero por favor: no use un cuadro desplegable "falso" usando javascript, porque la usabilidad de estas cosas generalmente es horrible. Entre otras cosas, la navegación con el teclado generalmente está ausente.
No, la flecha hacia abajo es un elemento del navegador. Está integrado en [y diferente] en cada navegador. Sin embargo, puede reemplazar el cuadro de selección con un cuadro desplegable personalizado mediante javascript.
Jan Hancic mencionó un plugin jQuery para hacer justamente eso.
Esto cambiará las entradas, seleccione etc. al estilo antiguo gris. No estoy seguro si puede manipular después de eso: En <head> put:
<meta http-equiv="MSThemeCompatible" content="NO">
Hay una solución genial exclusiva de CSS para diseñar menús desplegables aquí: http://bavotasan.com/2011/style-select-box-using-only-css/
Básicamente, ajuste el elemento seleccionado en un contenedor div, seleccione 18px más ancho que el contenedor con un fondo transparente, desborde: oculto en el contenedor (para cortar la flecha generada por el navegador) y agregue su imagen de fondo con un estilo estilizado. flecha al contenedor.
No funciona en IE7 (o 6), pero en serio, digo que si estás usando IE7 te mereces una experiencia desplegable menos bonita.
Tal vez puedas usar el reemplazo de jQuery selectbox . Es un plugin jQuery.
http://jsfiddle.net/u3cybk2q/2/ comprobar en Windows, iOS y Android (parche iexplorer)
.styled-select select {
background: transparent;
width: 240px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: visible;
background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
display: none; /*patch iexplorer*/
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>