Ubah warna latar belakang opsi kotak pilih

Saya memiliki sebuah selectkotak dan saya mencoba untuk mengubah warna latar belakang dari pilihan ketika selectkotak tersebut telah diklik dan menampilkan semua pilihan.

Lihat Fiddle

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

Anda harus menempatkan background-colorpada optiontag dan bukan selecttag ...

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

Jika Anda ingin memberi gaya pada setiap optiontag .. gunakan attributepemilih css :

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>

Saya tidak tahu apakah Anda telah mempertimbangkannya atau tidak, tetapi jika aplikasi Anda didasarkan pada pewarnaan berbagai pengelompokan item, Anda mungkin harus menggunakan <optgroup>tag yang digabungkan dengan kelas untuk referensi lebih lanjut. Sebagai contoh:

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

dan kemudian di bagian head dokumen Anda tulis css seperti ini:

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

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

Ya, Anda dapat mengatur ini dengan cara berlawanan menggunakan ini,

option:not(:checked) { }

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

Mirip dengan beberapa jawaban, tetapi tidak benar-benar dinyatakan, adalah menambahkan kelas ke tag opsi aktual dan menggunakan kelas css ... ini saat ini berfungsi untuk saya tanpa masalah di IE (lihat ss di atas).

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

Pilihan saya tidak akan mewarnai latar belakang sampai saya menambahkan! Important ke gayanya.

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

Jika Anda benar-benar ingin mengatur gaya dalam a, pertimbangkan untuk beralih ke drop-down berbasis Javascript / CSS seperti http://getbootstrap.com/2.3.2/components.html#dropdowns atau https://silviomoreto.github.io/ bootstrap-pilih / contoh / . Ini karena browser seperti IE tidak mengizinkan penataan opsi di dalam elemen . Chrome / OSX juga mengalami masalah ini - Anda tidak dapat mengatur gaya.

Namun peringatan dilampirkan pada pendekatan itu. Jenis menu ini bekerja sangat berbeda pada platform seluler karena elemen asli tidak digunakan. Mereka juga dapat memiliki kebiasaan yang mengganggu di desktop. Saran saya adalah 1) jangan menulis sendiri dan 2) temukan perpustakaan yang telah diuji dengan sangat baik.

Ini dia apa yang telah saya pelajari tentang subjek ini!

Spesifikasi CSS 2 tidak mengatasi masalah bagaimana elemen formulir harus disajikan kepada pengguna periode!

Baca di sini: majalah smashing

Akhirnya , Anda tidak akan pernah menemukan artikel teknis dari w3c atau lainnya yang ditujukan untuk topik ini. Elemen bentuk gaya pada kotak pilih tertentu tidak didukung sepenuhnya, namun Anda dapat berkeliling ... dengan sedikit usaha!

Styling Elemen Formulir HTML

Membangun Widget Kustom

Jangan buang waktu dengan peretasan seperti membaca tautan dan mempelajari bagaimana profesional menyelesaikan pekerjaan!

Cukup ubah warna bg

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

Pilihan lainnya adalah menggunakan Javascript:

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

(Tidak sebersih pemilih atribut CSS, tetapi lebih kuat)

$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>';

tambahkan $htmlIngressCssbagian html Anda :)