Wie ändere ich die Dropdown-Pfeilfarbe, ohne ein Bild zu verwenden?

Question

Ich versuche also, den Pfeil in einem Select-Tag zu einer benutzerdefinierten Farbe zu machen. Beispiel:

<input type="checkbox" class="checkbox1" checked="checked" /> 
<input type="text" spellcheck="false" size="20" /> 
<select class="dropdown"> 
    <option value=">">&gt;</option> 
    <option value="<">&lt;</option> 
    <option value=">=">&ge;</option> 
    <option value="<=">&le;</option> 
    <option value="==">&#61;</option> 
    <option value="!=">&ne;</option> 
</select> 

ich eine Menge Ratschläge gesehen habe stattdessen ein Bild zu verwenden, aber ich kann das nicht tun. Vielleicht könnte ▼ ▼ Teil einer Lösung sein?

Answer 1

AKTUELLE UPDATE: (jsFiddle: http://jsfiddle.net/ztayse92/) den Pfeil von der bisherigen Lösung Hergestellt unter der Dropdown-Liste und verwendeten transparenten Hintergrund. Dies ist so perfekt wie es nur geht und löst das Overlay/Hover nicht anklickbare Region Problem.

UPDATE: Hack Antwort ohne ein Bild mit: (jsFiddle: http://jsfiddle.net/swpha0s0/4/)

machte ich einen Behälter mit relativer Positionierung und ich habe den Drop-Down wählen und das Overlay-Symbol (Pfeil) mit absoluter Positionierung. In CSS entferne ich auch das Pfeil-Styling komplett. Der einzige Nachteil ist, dass, da das Pfeilsymbol ein Overlay ist, es nicht anklickbar ist, oder in anderen Worten, wenn die Maus auf den Pfeil klickt, wird das Dropdown nicht geöffnet. Ich habe den Pfeil so klein wie möglich gemacht. Ich dachte auch daran, einen Klick-Handler auf den Pfeil zu setzen und das Drop-down mit JavaScript zu öffnen, aber entsprechend (Is it possible to use JS to open an HTML select to show its option list?) ist es nicht möglich. Ich habe den Mauszeiger als Standard festgelegt, wenn Sie den Mauszeiger über den Pfeil bewegen, damit der Benutzer nicht das falsche Feedback erhält, dass dies auch anklickbar ist. Also das ist die nächste Lösung zu dem, was Sie wollen - ich bin neugierig, warum keine Bilder erlaubt sind und was ist der Anwendungsfall dafür?

HTML:

<div class="parent"> 
<select class="dropdown"> 
    <option value="&gt;">&gt;</option> 
    <option value="&lt;">&lt;</option> 
    <option value="&gt;=">&ge;</option> 
    <option value="&lt;=">&le;</option> 
    <option value="==">&#61;</option> 
    <option value="!=">&ne;</option> 
</select><div class="overlay-arrow">&#9660;</div> 
</div> 

CSS:

select.dropdown { 
    -webkit-appearance: none;  
    -moz-appearance: none;  
    appearance: none;  
    background-position: 22px 3px;     
    background-size: 13px 13px; 
    width: 40px; 
    height: 20px; 
    margin-left: 4px; 
    position: absolute; 
    cursor: pointer; 

} 

.overlay-arrow { 
    font-size: 9px; 
    color: red; 
    position: absolute; 
    right: 0px; 
    top : 10px; 
    cursor: default; 
    line-height: 1px; 

} 

.parent { 
    position: relative; 
    width: 40px; 
    height: 20px; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
} 

Original-Antwort mit Bild: (jsFiddle: http://jsfiddle.net/swpha0s0/2/):

Ich würde Sie CSS, wie die

verwenden vorschlagen

select.dropdown { 
    -webkit-appearance: none;  
    -moz-appearance: none;  
    appearance: none; 
    background: url('http://www.durhamcollege.ca/wp-content/themes/dc/images/green_download_arrow.png') no-repeat;   
    background-position: 22px 3px;     
    background-size: 13px 13px; 
    width: 40px; 
    height: 20px; 
    margin-left: 4px; 
} 

.dropdown-container { 
    float :left; 
    margin: 0px; 
} 

input { 
    margin-top:4px; 
    float: left; 
    display: block; 
} 
input[type=checkbox]{ 
    margin-top:8px; 
} 

Sie müssen die Hintergrundposition statisch ändern und zentrieren, wie Sie möchten, aber es ist gut, wenn Sie nur die Pfeildarstellung ändern oder ein eigenes Bild erstellen müssen. Dies ist ohne image/css oder Javascript nicht möglich (wenn Sie das Widget komplett ändern wollen). Sie können eine Klasse umschalten, wenn Sie darauf klicken, um den Hintergrund zu ändern, damit Sie einen weiteren Pfeil nach oben zeigen können.