Jak zmienić wybrany kolor strzałki w dół bez użycia obrazu?

Question

Staram się, aby strzałka w znaczniku select była kolorem niestandardowym. Przykład:

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

Widziałem wiele porad, aby użyć obrazu zamiast, ale nie mogę tego zrobić. Może użycie ▼ ▼ może być częścią rozwiązania?

Answer 1

NAJNOWSZE UPDATE (jsFiddle: http://jsfiddle.net/ztayse92/) Wykonane strzałkę poprzedniego rozwiązania, aby być pod rozwijanym i używane przezroczyste tło. To jest tak doskonałe, jak to tylko możliwe, i rozwiązuje problem z nakładaniem/najechaniem, który nie jest klikalny.

UPDATE: Hack rozwiązanie bez korzystania obraz: (jsFiddle: http://jsfiddle.net/swpha0s0/4/)

że wykonany pojemnik z odpowiedniego rozmieszczenia i umieścić rozwijaną selekcjonować i symbol nakładki (strzałka) w absolutnym pozycjonowania. W CSS całkowicie usuwam stylizację strzały. Jedyną wadą jest to, że ponieważ symbol strzałki jest nakładką, nie można jej kliknąć, a innymi słowy, gdy mysz kliknie na strzałkę, rozwijanie się nie otworzy. Sprawiłem, że strzałka zajmuje co najmniej miejsce. Pomyślałem także o umieszczeniu obsługi kliknięcia na strzałce i otwarciu menu rozwijanego za pomocą JavaScript, ale zgodnie z tym (Is it possible to use JS to open an HTML select to show its option list?) nie jest to możliwe. Ustawiłem kursor jako domyślny, gdy umieścisz kursor nad strzałką, aby użytkownik nie odebrał niewłaściwej informacji zwrotnej, którą można kliknąć. To jest najbliższe rozwiązanie tego, co chcesz - jestem ciekawy, dlaczego nie są dozwolone żadne obrazy i jaki jest w tym przypadek?

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 Odpowiedź z obrazka: (jsFiddle: http://jsfiddle.net/swpha0s0/2/):

ja proponuję użyć CSS jak ten

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

Musisz statycznie zmienić pozycję tła i wyśrodkować ją tak, jak lubisz, ale dobrze, jeśli chcesz zmienić wygląd strzałki lub umieścić własny obraz. Nie można tego zrobić bez obrazu/css lub javascript (jeśli chcesz całkowicie zmienić widżet). Możesz przełączyć klasę, gdy klikniesz ją, aby zmienić tło, dzięki czemu możesz mieć kolejną strzałkę skierowaną w górę.