Seleccionar cambio de estilo de flecha


125

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.

ingrese la descripción de la imagen aquí

¿Cómo puedo hacer que funcione en Firefox e IE9 donde obtengo esto?

ingrese la descripción de la imagen aquí

.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>

Respuestas:


123

Has intentado algo como ésto:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

No lo he probado, pero debería funcionar.

EDITAR : Parece que Firefox no admite esta función hasta la versión 35 ( lea más aquí )

Hay una solución aquí , échale un vistazo a jsfiddleesa publicación.


1
¿Qué pasa con Internet Explorer?
Francisco Corrales Morales

Eche un vistazo a la solución de @Peter Drinnan para IE
Morpheus

Encontré esta respuesta de una pregunta duplicada que muestra cómo agregar realmente un "botón" también, usando CSS puro (sin png, jpegs, etc.) stackoverflow.com/a/28274325/2098017
Anthony F.

El jsfiddle de la pregunta de 'solución alternativa' ya no funciona.
Dragos Rizescu

Para las bombillas de exhibición, use esto:appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;
mghhgm

61

Configuré un selectcon una flecha personalizada similar a la respuesta de Julio, sin embargo, no tiene un ancho establecido y usa svgcomo imagen de fondo. ( arrow_drop_downde los iconos de material-ui)

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

ingrese la descripción de la imagen aquí

Si necesita que también funcione en IE, actualice la flecha svg a base64 y agregue lo siguiente:

select::-ms-expand { display: none; }

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

Para facilitar el tamaño y el espacio de la flecha, use este svg:

url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

No tiene ningún espacio en los lados de la flecha.


1
podría colocar la flecha con mayor precisión usandobackground-position: top 5px right 4px;
Koen

Comprimido: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;
K-Gun

¿Puedo saber por qué usa en background-position-y: 5px;lugar de% (por ejemplo background-position-y: 50%;)?
Sam

45

Trabajando con una sola clase:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/


1
Su respuesta parece ser la más sencilla y usa solo css.
Austin Lovell

1
Por lo que vale, no tiene que establecer el ancho del campo y puede usar% para la posición de fondo también :)
shaneonabike

2
Firefox no admite background-position-x, pero sí admite background-position
kriskodzi

2
Es una pena que esta respuesta necesite tantos ajustes: - / Pero es una buena línea de partida.
walther

1
Si no desea depender de establecer un ancho para el control, pero aún desea rellenar la imagen desde el lado derecho, puede usar calc: por ejemplobackground-position-x: calc( 100% - 5px );
bhu Boue vidya

29

Aquí hay una solución elegante que usa un intervalo para mostrar el valor.

El diseño es así:

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle


5
+1 para esta solución, es la única forma que he encontrado de diseñar correctamente las flechas en IE9 y navegadores más antiguos. Hay muchos sitios que simplemente dicen que no puede diseñar cuadros de selección en IE9 y anteriores, y en su lugar ofrecen estrategias de respaldo, pero esta solución demuestra lo contrario.
Jon

Gracias, es tan útil.
Tortura severa

3
Vale la pena mencionar: esta solución requiere javascript , para el cual esta respuesta no está etiquetada .
random_user_name

21

Esto funcionaría bien, especialmente para aquellos que usan Bootstrap, probado en las últimas versiones del navegador:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control">
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
      </select>
    </div>
  </div>
</div>


9

Mira este Es hacky, tan simple como eso:

  • Establecer -prefix-appearanceen nonepara eliminar los estilos
  • Use text-indentpara "empujar" el contenido un poco hacia la derecha
  • Finalmente, establezca text-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 :)

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  text-indent: 1px;
  text-overflow: '';
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

Ver en JSFiddle


6

Funciona en todos los navegadores:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}

9
No consideras IE un navegador. No lo votaré en contra por eso.
user1566694

5

Diseñe la etiqueta con CSS y use eventos de puntero:

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

y el CSS relativo es

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

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/


1

He referido esta publicación , funcionó a la perfección, excepto que no escondió la flecha en el navegador IE.

Sin embargo, agregar lo siguiente oculta la flecha en IE:

&::-ms-expand {
      display: none;
    }

Solución completa (sass)

$select-border-color: #ccc;
$select-focus-color: green;

select {

    cursor: pointer;
    /* styling */
    background-color: white;
    border: 1px solid $select-border-color;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
    linear-gradient(to right, $select-border-color, $select-border-color);
    background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;

    /* Very imp: hide arrow in IE */
    &::-ms-expand {
      display: none;
    }

    &:-moz-focusring {
      color: transparent;
      text-shadow: none;
    }

    &:focus {
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
      background-size: 5px 5px, 5px 5px, 1px 1.5em;
      background-repeat: no-repeat;
      border-color: $select-focus-color;
      outline: 0;
    }
  }


-1

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:

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 90%; /*Adjust according to width of dropdown*/
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.