เปลี่ยนสีพื้นหลังของตัวเลือกกล่องเลือก

ฉันมีselectกล่องและฉันกำลังพยายามเปลี่ยนสีพื้นหลังของตัวเลือกเมื่อselectคลิกกล่องแล้วและแสดงตัวเลือกทั้งหมด

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

คุณจะต้องใส่background-colorในoptionแท็กและไม่selectแท็ก ...

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

หากคุณต้องการจัดรูปแบบแต่ละoptionแท็ก .. ให้ใช้attributeตัวเลือก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>

ฉันไม่รู้ว่าคุณได้พิจารณาหรือไม่ แต่ถ้าแอปพลิเคชันของคุณใช้การระบายสีกลุ่มรายการต่างๆคุณควรใช้<optgroup>แท็กคู่กับคลาสเพื่ออ้างอิงเพิ่มเติม ตัวอย่างเช่น:

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

จากนั้นในส่วนหัวของเอกสารของคุณให้เขียน css ดังนี้:

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

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

ใช่คุณสามารถตั้งค่านี้ด้วยวิธี oppisite โดยใช้สิ่งนี้

option:not(:checked) { }

ตรวจสอบสิ่งนี้ 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;
}

คล้ายกับคำตอบบางส่วน แต่ไม่ได้ระบุไว้จริงๆคือการเพิ่มคลาสลงในแท็กตัวเลือกจริงและใช้คลาส css ... สิ่งนี้ใช้งานได้สำหรับฉันโดยไม่มีปัญหากับ IE (ดู ss ด้านบน)

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

การเลือกของฉันจะไม่ทำให้พื้นหลังเป็นสีจนกว่าฉันจะเพิ่ม! สำคัญกับสไตล์

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

หากคุณต้องการจัดรูปแบบภายใน a ให้ลองเปลี่ยนไปใช้เมนูแบบเลื่อนลงตาม Javascript / CSS เช่นhttp://getbootstrap.com/2.3.2/components.html#dropdownsหรือhttps://silviomoreto.github.io/ bootstrap-select / ตัวอย่าง / . เนื่องจากเบราว์เซอร์เช่น IE ไม่อนุญาตให้จัดรูปแบบตัวเลือกภายในองค์ประกอบไม่อนุญาตให้จัดแต่งทรงผมของตัวเลือกภายในองค์ประกอบChrome / OSX ก็มีปัญหานี้เช่นกัน - คุณไม่สามารถกำหนดสไตล์ตัวเลือกได้

อย่างไรก็ตามคำเตือนติดอยู่กับแนวทางนั้น เมนูประเภทนี้ทำงานแตกต่างกันมากบนแพลตฟอร์มมือถือเนื่องจากไม่ได้ใช้องค์ประกอบดั้งเดิม พวกเขาสามารถมีนิสัยแปลก ๆ บนเดสก์ท็อปได้เช่นกัน คำแนะนำของฉันคือ 1) อย่าเขียนของคุณเองและ 2) หาห้องสมุดที่ผ่านการทดสอบมาอย่างดี

นี่คือสิ่งที่ฉันได้เรียนรู้เกี่ยวกับเรื่องนี้!

ข้อกำหนด CSS 2 ไม่ได้ช่วยแก้ปัญหาว่าควรนำเสนอองค์ประกอบของฟอร์มให้กับผู้ใช้อย่างไร!

อ่านที่นี่: นิตยสารยอดเยี่ยม

ในที่สุดคุณจะไม่พบบทความทางเทคนิคใด ๆ จาก w3c หรืออื่น ๆ ที่กล่าวถึงหัวข้อนี้ องค์ประกอบรูปแบบการจัดแต่งทรงผมในกล่องเลือกบางช่องไม่ได้รับการสนับสนุนอย่างเต็มที่อย่างไรก็ตามคุณสามารถขับรถไปรอบ ๆ ... ด้วยความพยายาม!

จัดแต่งทรงผมองค์ประกอบแบบฟอร์ม HTML

การสร้างวิดเจ็ตที่กำหนดเอง

อย่าเสียเวลาไปกับการแฮ็กเช่นอ่านลิงค์และเรียนรู้ว่ามืออาชีพทำงานให้ลุล่วงได้อย่างไร!

เพียงแค่เปลี่ยนสี bg

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

อีกทางเลือกหนึ่งคือการใช้ Javascript:

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

(ไม่สะอาดเท่าตัวเลือกแอตทริบิวต์ CSS แต่มีประสิทธิภาพมากกว่า)

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

เพิ่ม$htmlIngressCssในส่วน html ของคุณ :)