Wählen Sie die Boxpfeilart

Question

Ich möchte, dass der zweite Auswahlfeldpfeil mit dem ersten identisch wird. Aber ich habe keine Ahnung, warum sie anders sind, weil ich den Pfeil nicht gestylt habe.

Answer 1

Browser und OS den Stil der Auswahlboxen in den meisten Fällen bestimmen, und es ist fast unmöglich, allein sie mit CSS zu ändern. Sie müssen nach Ersatzmethoden suchen. Der Haupttrick besteht darin, appearance: none anzuwenden, mit dem Sie etwas vom Styling überschreiben können.

Meine Lieblingsmethode ist diese:

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

Es ist nicht das O wählen Sie die Menü-UI-Element ersetzt, so dass alle Probleme im Zusammenhang mit zu tun, die nicht existent sind (nicht in der Lage zu durchbrechen des Browserfensters mit einer langen Liste, die die wichtigste ist).

Viel Glück :)

Answer 2

können Sie jQuery selectbox replacement verwenden. Es ist ein jQuery-Plugin.

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

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

Answer 3

Die Auswahlbox Pfeil ist eine native UI-Element, hängt es von der Desktop-Thema oder den Web-Browser. Verwenden Sie ein jQuery-Plugin (z. B. Select2, Chosen) oder CSS.

Answer 4

für any1 mit IE8 und nicht mit einem Plugin Ich habe etwas inspiriert von Rohit Azad und Bacotasan Blog, ich habe gerade einen Bereich mit JS hinzugefügt, um den ausgewählten Wert anzuzeigen.

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

die CSS (i verwendet nur einen Pfeil für BG, aber man könnte ein Vollbild setzen und die Positionierung fallen):

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

die js:

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

Answer 5

in Firefox 39 Ich habe festgestellt, dass beim Setzen eines Rahmens auf das select-Element der Pfeil als (2) gerendert wird. Kein Rahmen gesetzt, der Pfeil wird als (1) dargestellt. Ich denke, es ist ein Fehler.

Answer 6

http://jsfiddle.net/u3cybk2q/2/ Scheck an Fenstern, iOS und Android (iexplorer Patch)

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