Görüntüyü seçmeden aşağı açılırken ok rengini nasıl değiştirebilirim?

Question

yüzden özel bir renk olmasını seçkin bir etikette oku almaya çalışıyorum. Örnek: tavsiyenin büyük kısmı yerine bir resim kullanmak, ama bunu yapamam gördüğüm

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

. Belki bir ▼ ▼ kullanıyor bir çözüm olabilir?

Answer 1

SON GÜNCELLEME: (jsFiddle: http://jsfiddle.net/ztayse92/) önceki çözümün oku yapılmış açılır menüsü altında olması ve şeffaf bir arka plan kullanılan. Bu mümkün olduğu kadar mükemmel ve overlay/hover değil tıklanabilir bölge sorunu çözer.

GÜNCELLEME: Bir görüntüyü kullanmadan Hack cevap: (jsFiddle: http://jsfiddle.net/swpha0s0/4/)

göreli konumlandırma ile bir kap yaptı ve ben seçin açılır koymak ve mutlak konumlama ile bindirme simgesi (ok). CSS'de ok stilini tamamen kaldırırım. Tek dezavantajı, ok sembolü bir bindirme olduğu için tıklanabilir olmaması veya başka bir deyişle, farenin ok üzerinde tıklatılmasının ardından açmanın açılmamasıdır. Okun en az yer açmasını sağladım. Ben de oka bir tıklama işleyicisi koyarak düşünce ve JavaScript ile açılır menüyü ama bu (Is it possible to use JS to open an HTML select to show its option list?) 'e göre bu mümkün değildir. Okun üzerine geldiğinizde imleci varsayılan yaptık, böylece kullanıcı bunun tıklanabilir olduğu konusunda yanlış geribildirim almaz. Yani bu sizin istediğiniz şeye en yakın çözümdür - neden resimlere izin verilmediğini ve bunun için kullanım durumunun ne olduğunu merak ediyorum.

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:: görüntüyle

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

Orjinal Cevap (jsFiddle: http://jsfiddle.net/swpha0s0/2/):

Bunu

gibi CSS kullanmak öneririm

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

Sen statik background-konumunu değiştirmek ve ona istediğiniz gibi ortalamak zorunda ama sadece ok görünümünü değiştirmek ya da kendi imajını koymak gerekirse iyi. Görüntü/css veya javascript olmadan bunu yapmak mümkün değildir (widget'i tamamen değiştirmek isterseniz). Arka planı değiştirmek için tıkladığınızda bir sınıfı da değiştirebilirsiniz, böylece yukarıyı gösteren başka bir ok da olabilir.