पहले चयन विकल्प के टेक्स्ट रंग को कैसे बदलें

Question

मेरे पास एक चुनिंदा तत्व है जिसमें कई आइटम हैं। मैं अपनी पहली वस्तु का रंग बदलना चाहता हूं। लेकिन ऐसा लगता है कि जब आप चुनिंदा ड्रॉपडाउन पर क्लिक करते हैं तो रंग केवल दिखाता है। मुझे जो चाहिए वह रंग बदल गया है (जैसे रंग ग्रे) जब पेज लोड होता है तो उपयोगकर्ता पहले विकल्प रंग बदल सकते हैं।

उदाहरण यहाँ देखें ... http://jsbin.com/acucan/4/

जवाब के लिए धन्यवाद! यह पहली बार है जब मैं यहां प्रश्न पोस्ट करता हूं। मेरी अंग्रेजी के बारे में क्षमा करें। मुझे उम्मीद है कि मैं सवाल स्पष्ट कर दूंगा।

धन्यवाद

Answer 1

क्या इस बारे में: JSFiddle

एचटीएमएल:

<select> 
    <option>Text 1</option> 
    <option>Text 2</option> 
    <option>Text 3</option> 
</select> 

select{ 
    width: 150px; 
    height: 30px; 
    padding: 5px; 
    color: green; 
} 
select option { color: black; } 
select option:first-child{ 
    color: green; 
} 

http://jsbin.com/acucan/9

Answer 2

आप सीएसएस का उपयोग करके ऐसा कर सकते हैंसीएसएस:

select option:first-child { color:red; } 

या आप बिल्कुल जावास्क्रिप्ट का उपयोग करने की आवश्यकता है (इस के लिए सलाह दी नहीं): JSFiddle

जावास्क्रिप्ट:

$(function() { 
    $("select option:first-child").addClass("highlight"); 
}); 

सीएसएस:

.highlight { color:red; } 

Answer 3

मैं वास्तव में यह चाहता था (प्लेसहोल्डर्स को टेक्स्ट बॉक्स के लिए चयन बॉक्स के रूप में देखना चाहिए es!) और सीएसएस सीएसएस क्रोम में काम नहीं कर रहा था। यहां मैंने किया है:

पहले सुनिश्चित करें कि आपके चयन टैग में .has-prompt कक्षा है।

फिर document.ready में इस कक्षा को प्रारंभ करें।

# Adds a class to select boxes that have prompt currently selected. 
# Allows for placeholder-like styling. 
# Looks for has-prompt class on select tag. 
Mess.Views.SelectPromptStyler = Backbone.View.extend 
    el: 'body' 

    initialize: -> 
    @$('select.has-prompt').trigger('change') 

    events: 
    'change select.has-prompt': 'changed' 

    changed: (e) -> 
    select = @$(e.currentTarget) 
    if select.find('option').first().is(':selected') 
     select.addClass('prompt-selected') 
    else 
     select.removeClass('prompt-selected') 

सीएसएस में

तब:

select.prompt-selected { 
    color: $placeholder-color; 
} 

Answer 4

यहाँ एक तरीका तो यह है कि जब आप किसी विकल्प का चयन, यह काला हो जाता है है। जब आप इसे प्लेसहोल्डर पर वापस बदलते हैं, तो यह प्लेसहोल्डर रंग में वापस आ जाता है (इस मामले में लाल)।

http://jsfiddle.net/wFP44/166/

यह विकल्प की आवश्यकता है मान होना।

$('select').on('change', function() { 
 
    if ($(this).val()) { 
 
return $(this).css('color', 'black'); 
 
    } else { 
 
return $(this).css('color', 'red'); 
 
    } 
 
});

select{ 
 
    color: red; 
 
} 
 
select option { color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
<option value="">Pick one...</option> 
 
<option value="test1">Test 1</option> 
 
<option value="test2">Test 2</option> 
 
<option value="test3">Test 3</option> 
 
</select>

Answer 5

तो पहले आइटम है एक प्लेसहोल्डर (रिक्त मान) के रूप में प्रयोग की जाने वाली और अपने चयन required तो आप उसे लक्ष्य :invalid छद्म वर्ग का उपयोग कर सकते है।

select { 
 
    -webkit-appearance: menulist-button; 
 
    color: black; 
 
} 
 

 
select:invalid { 
 
    color: green; 
 
}

<select required> 
 
    <option value="">Item1</option> 
 
    <option value="Item2">Item2</option> 
 
    <option value="Item3">Item3</option> 
 
</select>