Estoy tratando de reemplazar la flecha de una selección con una imagen propia. Estoy incluyendo la selección en un div con el mismo tamaño, configuré el fondo de la selección como transparente e incluyo una imagen (con el mismo tamaño que la flecha) en la esquina superior derecha del div como fondo.
Solo funciona en Chrome.
¿Cómo puedo hacer que funcione en Firefox e IE9 donde obtengo esto?
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}<HTML>
<HEAD>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>
appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;Configuré un
selectcon una flecha personalizada similar a la respuesta de Julio, sin embargo, no tiene un ancho establecido y usasvgcomo imagen de fondo. (arrow_drop_downde los iconos de material-ui)Si necesita que también funcione en IE, actualice la flecha svg a base64 y agregue lo siguiente:
Para facilitar el tamaño y el espacio de la flecha, use este svg:
No tiene ningún espacio en los lados de la flecha.
fuente
background-position: top 5px right 4px;background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat transparent;background-position-y: 5px;lugar de% (por ejemplobackground-position-y: 50%;)?Trabajando con una sola clase:
http://jsfiddle.net/qhCsJ/4120/
fuente
background-position-x: calc( 100% - 5px );Aquí hay una solución elegante que usa un intervalo para mostrar el valor.
El diseño es así:
JsFiddle
fuente
Esto funcionaría bien, especialmente para aquellos que usan Bootstrap, probado en las últimas versiones del navegador:
fuente
Mira este Es hacky, tan simple como eso:
-prefix-appearanceennonepara eliminar los estilostext-indentpara "empujar" el contenido un poco hacia la derechatext-overflowuna cadena vacía. Todo lo que se extienda más allá de su ancho se convertirá en ... ¡nada! Y eso incluye la flecha.Ahora eres libre de darle estilo como quieras :)
Ver en JSFiddle
fuente
Funciona en todos los navegadores:
fuente
Diseñe la etiqueta con CSS y use eventos de puntero:
y el CSS relativo es
Solo usé una flecha hacia abajo aquí, pero puedes establecer un bloque con una imagen de fondo. Aquí hay una muestra de violín feo: https://jsfiddle.net/1rofzz89/
fuente
He referido esta publicación , funcionó a la perfección, excepto que no escondió la flecha en el navegador IE.
fuente
Supongamos que selectDrop es la clase presente en su etiqueta HTML, por lo que esta cantidad de código es suficiente para cambiar el icono de flecha predeterminado:
fuente