Seçim kutusu seçeneği arka plan rengini değiştir

Bir selectkutum var ve selectkutuya tıklandığında ve tüm seçenekleri gösterdiğinde seçeneklerin arka plan rengini değiştirmeye çalışıyorum .

Fiddle'a bakın

HTML:

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS:

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

Sen koymak gerekir background-colorüzerinde optionetiketi ve selectetiketin ...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

Her bir optionetiketin stilini belirlemek istiyorsanız , css attributeseçiciyi kullanın :

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

Bunu dikkate alıp almadığınızı bilmiyorum, ancak uygulamanız çeşitli öğe gruplarını renklendirmeye dayanıyorsa, muhtemelen <optgroup>daha fazla referans için bir sınıfla birleştirilmiş etiketi kullanmalısınız . Örneğin:

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

ve sonra belgenizin başına şu şekilde css yazın:

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

Evet, bunu kullanarak bunu zıt bir şekilde ayarlayabilirsiniz,

option:not(:checked) { }

şuna göz at demo jsFiddle

HTML

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

Bazı cevaplara benzer, ancak gerçekten belirtilmeyen, gerçek seçenek etiketine bir sınıf eklemek ve css sınıflarını kullanmaktır ... bu şu anda benim için IE'de sorun olmadan çalışıyor (yukarıdaki ss'ye bakın).

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS:

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

Tarz için önemli olanı ekleyene kadar seçimlerim arka planı renklendirmeyecek.

    input, select, select option{background-color:#FFE !important}

A'yı gerçekten biçimlendirmek istiyorsanız, http://getbootstrap.com/2.3.2/components.html#dropdowns veya https://silviomoreto.github.io/ gibi Javascript / CSS tabanlı bir açılır menüye geçmeyi düşünün. bootstrap-select / örnekler / . Bunun nedeni, IE gibi tarayıcıların öğeler içindeki seçeneklerin stiline izin vermemesidir . Chrome / OSX'te de bu sorun var - seçeneklere stil uygulayamazsınız.

Ancak bu yaklaşıma bir uyarı eklenir. Bu tür menüler, mobil platformlarda çok farklı çalışır çünkü yerel öğeler kullanılmaz. Masaüstünde de can sıkıcı tuhaflıklar olabilir. Benim tavsiyem 1) kendiniz yazmayın ve 2) gerçekten iyi test edilmiş bir kitaplık bulun.

İşte konu hakkında öğrendiklerim işte burada!

CSS 2 spesifikasyonu, form öğelerinin kullanıcılara nasıl sunulması gerektiği sorununu çözmedi!

Burada okuyun: smashing dergisi

Sonunda , w3c veya bu konuyla ilgili başka bir teknik makale bulamayacaksınız. Form öğelerini özellikle seçme kutularında biçimlendirme tam olarak desteklenmez, ancak biraz çaba sarf ederek etrafta dolaşabilirsiniz!

HTML Form Öğelerini Stil Etme

Özel Widget'lar Oluşturma

Bilgisayar korsanlarıyla zaman kaybetmeyin, bu tür bağlantıları okuyun ve profesyonellerin işi nasıl tamamladığını öğrenin!

Basitçe bg rengini değiştirin

select { background: #6ac17a; color:#fff; }

Diğer bir seçenek de Javascript kullanmaktır:

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(CSS özellik seçici kadar temiz değil, ancak daha güçlü)

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

$htmlIngressCsshtml bölümünüzü ekleyin :)