चुनिंदा बॉक्स के विकल्प टेक्स्ट का रंग कैसे बदलें?

मुझे लगता है कि केवल पाठ (एक विकल्प का चयन) रंग ग्रे के लिए पहला विकल्प का रंग बदलने की कोशिश कर रहा हूँ, लेकिन यहाँ यह यहां काम नहीं कर रहा:चुनिंदा बॉक्स के विकल्प टेक्स्ट का रंग कैसे बदलें?

.grey_color { 
 
    color: #ccc; 
 
    font-size: 14px; 
 
}

<select id="select"> 
 
    <option selected="selected"><span class="grey_color">select one option</span></option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
    <option>three</option> 
 
    <option>four</option> 
 
    <option >five</option> 
 
</select>

मेरे jsfiddle यहाँ है jsfiddle

स्रोत

2011-12-26 Anonymous

क्या इस बारे में? http://jsfiddle.net/hUpAB/1/ –

आप शायद पहले विकल्प को पूरी तरह छुपा सकते हैं: http://stackoverflow.com/questions/9447134/html-select-how-to-set-default- टेक्स्ट-जो-वॉन-शो-इन-ड्रॉप-डाउन-सूची – Zook

सुरेश, आपको अपने कोड में कुछ भी उपयोग करने की आवश्यकता नहीं है। आपको क्या करना होगा बस कुछ इस तरह है:

.others { 
 
    color:black 
 
}

<select id="select"> 
 
    <option style="color:gray" value="null">select one option</option> 
 
    <option value="1" class="others">one</option> 
 
    <option value="2" class="others">two</option> 
 
</select>

लेकिन जैसा कि आप देख सकते हैं, क्योंकि विकल्प में अपना पहला आइटम पहली बात यह है कि अपने चयन नियंत्रण से पता चलता है, तो आप नहीं देख सकते हैं अपने असाइन रंग जबकि यदि आप चयन सूची खोलते हैं और खुली वस्तुओं को देखते हैं, तो आप देखेंगे कि आप पहले विकल्प में ग्रे रंग असाइन कर सकते हैं। तो आपको jQuery में कुछ और चाहिए।

$(document).ready(function() { 
    $('#select').css('color','gray'); 
    $('#select').change(function() { 
     var current = $('#select').val(); 
     if (current != 'null') { 
      $('#select').css('color','black'); 
     } else { 
      $('#select').css('color','gray'); 
     } 
    }); 
});

यह मेरा कोड jsFiddle में है।

स्रोत

2011-12-26 11:43:51

नमस्ते आपने जो कुछ भी चाहते हैं उसके लिए आपको जवाब दिया है, बहुत बहुत धन्यवाद :) :) –

आपका स्वागत है सुरेश –

हालांकि यह पीसी पर पूरी तरह से काम करता है (यहां तक कि स्क्रीन री-साइज्ड के साथ भी)। यह मेरे एचटीसी वन फोन पर काम नहीं करता है और आजकल लगभग 40% ब्राउजिंग स्मार्टफोन के माध्यम से है। तो सावधान रहें। – rosh3000

तुम बस option विशेषता के रूप में disabled जोड़ने की जरूरत है

<option disabled>select one option</option>

स्रोत

2011-12-26 11:33:26 Simone

:) +100! मैं वही जवाब लिखने वाला था! क्योंकि यह इतना स्पष्ट है कि ओपी –

प्राप्त करने का प्रयास कर रहा है केवल आवश्यक फ़ील्ड के लिए इसका उपयोग करें। यह उपयोगकर्ता को फॉर्म को पुनः लोड किए बिना मूल्य को साफ़ करना असंभव बनाता है। –

स्पैन टैग के बिना सिर्फ इस प्रयास करें:

<option selected="selected" class="grey_color">select one option</option>

बड़ा लचीलेपन के लिए आप किसी भी जे एस विजेट का उपयोग कर सकते हैं।

स्रोत

2011-12-26 11:33:36

आप विकल्पों के अंदर एचटीएमएल कोड हो सकता है नहीं, वे केवल पाठ हो सकता है, लेकिन आप के बजाय विकल्प के लिए कक्षा आवेदन कर सकते हैं:

<option selected="selected" class="grey_color">select one option</option>

डेमो: http://jsfiddle.net/Guffa/hUpAB/9/

नोट:

स्टाइल विकल्पों के लिए समर्थन ब्राउज़र के बीच भिन्न होता है। आधुनिक ब्रोसर में आप आम तौर पर रंग के लिए समर्थन की उम्मीद कर सकते हैं लेकिन फ़ॉन्ट आकार के लिए नहीं। उदाहरण के लिए एक फोन में एक ब्राउज़र ड्रॉपडाउन में विकल्प प्रदर्शित नहीं करता है, इसलिए स्टाइल बिल्कुल प्रासंगिक नहीं होगा।
आपके पास jsfiddle में HTML कोड में html और head टैग नहीं होना चाहिए।
आपको प्रतिनिधित्व के लिए अपने वर्गों का नाम देना चाहिए, न कि वे कैसे दिखते हैं।

स्रोत

2011-12-26 11:56:11 Guffa

पृष्ठ लोड करते समय यह "रंग एक विकल्प" ग्रे रंग नहीं करता है। यह कैसे किया जा सकता है? – Matoeil

@ मेटोइल: 'चयन' तत्व का रंग सेट करने का प्रयास करें। – Guffa

मुझे हाल ही में इसी चीज़ के साथ परेशानी हो रही थी और मुझे वास्तव में एक सरल समाधान मिला।

आपको बस इतना करना है कि अक्षम और चयनित करने का पहला विकल्प सेट करें।इस तरह:

<select id="select"> 
 
    <option disabled="disabled" selected="selected">select one option</option> 
 
    <option>one</option> 
 
    <option>two</option> 
 
    <option>three</option> 
 
    <option>four</option> 
 
    <option>five</option> 
 
</select>

यह पहला विकल्प (धूसर हो), जब पेज लोड प्रदर्शित करेगा। यह उपयोगकर्ता को सूची में क्लिक करने के बाद इसे चुनने में सक्षम होने से रोकता है।

स्रोत

2012-09-05 11:04:06 Mystikmyshel

हालांकि, यह केवल उन क्षेत्रों के लिए उपयोग किया जाना चाहिए जो आवश्यक हैं। यदि यह एक वैकल्पिक फ़ील्ड है, तो उपयोगकर्ता इसे किसी भी चयन में रीसेट नहीं कर सकता है। –

यह मेरे लिए क्रोम पर काम नहीं करता – Fabio

यहाँ jQuery के साथ अपने प्रदर्शन

<!doctype html> 
<html> 
<head> 
<style> 
    select{ 
     color:#aaa; 
    } 
    option:not(first-child) { 
     color: #000; 
    } 
</style> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("select").change(function(){ 
      if ($(this).val()=="") $(this).css({color: "#aaa"}); 
      else $(this).css({color: "#000"}); 
     }); 
    }); 
</script> 
<meta charset="utf-8"> 
</head> 
<body> 
<select> 
    <option disable hidden value="">CHOOSE</option> 
    <option>#1</option> 
    <option>#2</option> 
    <option>#3</option> 
    <option>#4</option> 
</select> 
</body> 
</html>

https://jsfiddle.net/monster75/cnt73375/1/

स्रोत

2016-10-15 12:19:21 Fabio

<select id="select"> 
 
    <optgroup label="select one option"> 
 
     <option>one</option> 
 
     <option>two</option> 
 
     <option>three</option> 
 
     <option>four</option> 
 
     <option>five</option> 
 
    </optgroup> 
 
</select>

यह सब मेरे लिए कड़ी मेहनत का एक बहुत कुछ है, जब optgroup आप देता है कि तुम क्या जरूरत है की तरह लग रहा है - कम से कम मुझे लगता है कि यह करता है।

स्रोत

2017-06-12 17:04:01 PureChocolate

-1

सिर्फ स्पैन टैग

<option value="" disabled selected ><span style="color:grey;">Select Category...</span></option>

का उपयोग और यह thats

स्रोत

2018-01-24 18:31:33

ठीक है यह बेकार माफ करना दोस्तों मेरे बुरे हैं! –

चुनिंदा बॉक्स के विकल्प टेक्स्ट का रंग कैसे बदलें?

उत्तर

संबंधित मुद्दे