चुनिंदा बॉक्स विकल्प पृष्ठभूमि रंग बदलें

Question

मेरे पास एक selectबॉक्स है और जब मैं विकल्पों की पृष्ठभूमि का रंग बदलने की कोशिश कर रहा हूंselect बॉक्स पर क्लिक किया गया है और सभी विकल्पों को दिखाता है।

फिडल देखें

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>

सीएसएस:

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

Answer 1

आप लगाने की जरूरत 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टैग को स्टाइल करना चाहते हैं .. तो css attributeचयनकर्ता का उपयोग करें :

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>

Comments

मैंने आरजीबीए विकल्प को हटा दिया और लगता है कि अब काले रंग का उपयोग किया जाएगा जो :)

— एनजीप्लेग्राउंड

आप :nth-child(1..n)इसके बजाय CSS चयनकर्ता का उपयोग कर सकते हैं ।

— शमूएल एलवाई

आपको शायद विशेषता चयनकर्ता का उपयोग नहीं करना चाहिए। आप शायद n-th-child का उपयोग करना चाहते हैं या इसके बजाय प्रत्येक विकल्प को कक्षा देना चाहते हैं।

— फ्रेड

फ़ायरफ़ॉक्स पर काम नहीं कर रहा है, न ही क्रोमियम (लिनक्स एन्टरगोस) में

— अल्बर्ट

जोड़ने का प्रयास करें !imporant। उदाहरण के लिए:background: red!important;

— michal

Answer 2

मुझे नहीं पता कि आपने इस पर विचार किया है या नहीं, लेकिन यदि आपका आवेदन वस्तुओं के विभिन्न समूहों को रंग देने पर आधारित है, तो आपको संभवतः <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>

और फिर अपने दस्तावेज़ के सिर में इस तरह से सीएसएस लिखें:

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

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

Answer 3

हाँ आप इसे प्रयोग करके उत्पीड़ित तरीके से सेट कर सकते हैं,

option:not(:checked) { }

इसे देखो demo jsFiddle

एचटीएमएल

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

सीएसएस

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

Comments

@aswzen वास्तव में क्रोम में मेरे लिए (v65) काम कर रहा है लेकिन फ़ायरफ़ॉक्स क्वांटम (v59) में नहीं।

— CPHPython

Answer 4

कुछ उत्तरों के समान, लेकिन वास्तव में कहा नहीं गया है, एक वर्ग को वास्तविक विकल्प टैग में जोड़ना है और सीएसएस कक्षाओं का उपयोग करना है ... यह वर्तमान में IE पर मुद्दे के बिना मेरे लिए काम कर रहा है (ऊपर ss देखें)।

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

सीएसएस:

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

Answer 5

मेरे चयन पृष्ठभूमि को तब तक नहीं रंगेंगे जब तक कि मैं शैली में शामिल नहीं हो जाता।

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

Answer 6

यदि आप वास्तव में एक के भीतर शैली करना चाहते हैं, तो एक जावास्क्रिप्ट / सीएसएस आधारित ड्रॉप डाउन जैसे कि http://getbootstrap.com/2.3.2/compenders.html#dropdowns या https://silviomoreto.github.io/ पर स्विच करने पर विचार करें। बूटस्ट्रैप-चयन / उदाहरण / । ऐसा इसलिए है क्योंकि IE जैसे ब्राउज़र तत्वों के भीतर विकल्पों की स्टाइलिंग की अनुमति नहीं देते हैं । Chrome / OSX में भी यह समस्या है - आप विकल्प नहीं चुन सकते।

हालाँकि उस दृष्टिकोण से एक चेतावनी जुड़ी हुई है। इस प्रकार के मेनू मोबाइल प्लेटफार्मों पर बहुत अलग तरीके से काम करते हैं क्योंकि देशी तत्वों का उपयोग नहीं किया जाता है। वे डेस्कटॉप पर भी परेशान कर सकते हैं। मेरी सलाह है 1) अपना खुद का और 2 न लिखें) एक पुस्तकालय खोजें जो वास्तव में अच्छी तरह से परीक्षण किया गया हो।

Answer 7

यहाँ यह वही है जो मैंने इस विषय के बारे में सीखा है!

CSS 2 विनिर्देश ने समस्या को संबोधित नहीं किया कि उपयोगकर्ताओं को अवधि के लिए तत्व कैसे प्रस्तुत किए जाने चाहिए!

यहां पढ़ें: पत्रिका को तोड़ते हुए

आखिरकार , आपको कभी भी w3c या इस विषय पर संबोधित अन्य तकनीकी लेख नहीं मिलेंगे। विशेष रूप से चयनित बक्से में स्टाइलिंग फॉर्म तत्व पूरी तरह से समर्थित नहीं हैं, फिर भी आप कुछ प्रयासों के साथ ... के आसपास ड्राइव कर सकते हैं!

स्टाइलिंग HTML फॉर्म एलिमेंट्स

कस्टम विजेट का निर्माण

हैक के साथ समय बर्बाद मत करो ई ऐसे लिंक पढ़ें और जानें कि पेशेवरों को कैसे काम मिलता है!

Answer 8

बस बीजी रंग बदलें

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

Answer 9

एक अन्य विकल्प जावास्क्रिप्ट का उपयोग करना है:

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

(सीएसएस विशेषता चयनकर्ता के रूप में साफ नहीं है, लेकिन अधिक शक्तिशाली)

Answer 10

$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 भाग में जोड़ें :)