Kutu ok stilini seçin

Question

İkinci seçim kutusu okunu ilk ile aynı hale getirmek istiyorum. Ama neden farklı olduklarına dair hiçbir fikrim yok, çünkü o okyu şekillendirmedim.

Answer 1

Tarayıcılar ve İşletim en çoğu durumda seçkin kutuları stilini belirlemek ve yalnız CSS ile bunları değiştirmek imkansız yanındadır. Değiştirme yöntemlerine bakmak zorundasınız. Ana numara, stilin bazılarını geçersiz kılmanıza olanak veren appearance: none'u uygulamaktır.

sevdiğim yöntem bu biridir:

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

O var olmayan yapıyor ilgili tüm sorunları (patlak mümkün olmayan bu yüzden OS seçme menüsü UI öğesi yerine geçmez tarayıcı penceresinin uzun bir liste ana olanıdır).

İyi şanslar :)

Answer 2

sen jQuery selectbox replacement kullanabilirsiniz. Bu bir jQuery eklentisi.

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

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

Answer 3

seçme kutusu ok bir yerli ui unsurdur, bu masaüstü teması veya web tarayıcısına bağlıdır. Bir jQuery eklentisi (ör. Select2, Chosen) veya CSS kullanın.

Answer 4

any1 kullanarak ie8 ve Rohit Azad ve Bacotasan'ın blogundan ilham alan bir eklenti kullanmak istemiyorum, seçilen değeri göstermek için JS kullanarak bir span ekledim.

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> 

css (i BG için sadece bir ok kullanılır ama konumlandırma tam görüntüsünü koyup düşebilir):

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

js:

Firefox 39 içinde

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

Answer 5

Seçme elemanına bir kenarlık koymanın oku (2) olarak göstereceğini buldum. Sınır yok, oku (1) olarak gösterecektir. Bence bir böcek. pencerelerde

Answer 6

http://jsfiddle.net/u3cybk2q/2/ çek, iOS ve Android (IEXPLORER yama)

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