Seleccionar estilo de flecha de cuadro

Question

Quiero hacer que la segunda flecha de cuadro de selección sea la misma que la primera. Pero no tengo idea de por qué son diferentes, porque no diseñé la flecha.

Answer 1

Los navegadores y sistemas operativos determinar el estilo de las cajas de selección en la mayoría de los casos, y es casi imposible de alterar con CSS solo. Tendrás que buscar métodos de reemplazo. El truco principal es aplicar appearance: none que le permite anular parte del estilo.

Mi método favorito es éste:

http://cssdeck.com/item/265/styling-select-box-with-css3

No reemplaza el sistema operativo menú de selección de elemento de interfaz de usuario por lo que todos los problemas relacionados con hacer que son inexistentes (no ser capaz de romper de la ventana del navegador con una larga lista siendo la principal).

Buena suerte :)

Answer 2

puede utilizar jQuery selectbox replacement. Es un plugin jQuery.

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

ElPure-csshttp://bavotasan.com/2011/style-select-box-using-only-css/

Answer 3

El cuadro de selección flecha es un elemento de interfaz de usuario nativa, que depende del tema de escritorio o en el navegador web. Use un complemento jQuery (por ejemplo, Select2, Chosen) o CSS.

Answer 4

para any1 usando ie8 y no quiero usar un complemento. He hecho algo inspirado en el blog de Rohit Azad y Bacotasan. Acabo de agregar un lapso usando JS para mostrar el valor seleccionado.

el html:

<div class="styled-select"> 
    <select> 
     <option>Here is the first option</option> 
     <option>The second option</option> 
    </select> 
    <span>Here is the first option</span> 
</div> 

el css (i utilizado solamente una flecha para BG, pero se puede poner una imagen completa y soltar el posicionamiento):

.styled-select div 
{ 
    display:inline-block; 
    border: 1px solid darkgray; 
    width:100px; 
    background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px; 
    position:relative; 
} 

.styled-select div select 
{ 
    height: 30px; 
    width: 100px; 
    font-size:14px; 
    font-family:ariel; 

    -moz-opacity: 0.00; 
    opacity: .00; 
    filter: alpha(opacity=00); 
} 

.styled-select div span 
{ 
    position: absolute; 
    right: 10px; 
    top: 6px; 
    z-index: -5; 
} 

el js:

$(".styled-select select").change(function(e){ 
    $(".styled-select span").html($(".styled-select select").val()); 
}); 

Answer 5

en Firefox 39 He encontrado que establecer un borde en el elemento de selección hará que la flecha se muestre como (2). Sin bordes establecidos, representará la flecha como (1). Creo que es un error.

Answer 6

http://jsfiddle.net/u3cybk2q/2/ cheque en las ventanas, el IOS y Android (IExplorer parche)

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

<div class="styled-select"> 
 
    <select> 
 
     <option>Here is the first option</option> 
 
     <option>The second option</option> 
 
    </select> 
 
</div>