html - मैं 'चयन' बॉक्स के लिए प्लेसहोल्डर कैसे बना सकता हूं?




css html5 html-select placeholder (16)

मैं टेक्स्ट इनपुट के लिए प्लेसहोल्डर का उपयोग कर रहा हूं जो ठीक काम कर रहा है। लेकिन मैं अपने चयन बॉक्स के लिए प्लेसहोल्डर का भी उपयोग करना चाहता हूं। मैं बस इस कोड का उपयोग कर सकते हैं:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

लेकिन 'आपका विकल्प चुनें' लाइटग्रे के बजाय काले रंग में है। तो मेरा समाधान संभवतः सीएसएस-आधारित हो सकता है। jQuery भी ठीक है।

यह केवल ड्रॉपडाउन में विकल्प ग्रे बनाता है (इसलिए तीर पर क्लिक करने के बाद):

option:first {
    color: #999;
}

संपादित करें: सवाल यह है कि लोग चयन बॉक्स में प्लेसहोल्डर्स कैसे बनाते हैं? लेकिन यह पहले से ही उत्तर दिया गया है, चीयर्स।

और चयनित परिणामों में इन परिणामों का उपयोग हमेशा ग्रे होना (वास्तविक विकल्प चुनने के बाद भी):

select {
    color:#999;
}

Answers

उपर्युक्त सभी समाधानों के संबंध में, लेकिन यह HTML चश्मे के कारण सबसे मान्य मानता है:

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

अद्यतन: इस गलत उत्तर के लिए मुझे क्षमा करें, यह निश्चित रूप से select तत्व के लिए प्लेसहोल्डर समाधान नहीं है, लेकिन खुली select तत्व सूची के तहत समूहबद्ध विकल्पों के लिए एक शीर्षक है।


एक आवश्यक फ़ील्ड के लिए, आधुनिक ब्राउज़रों में एक शुद्ध-सीएसएस समाधान है:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


मुझे एक ही समस्या थी और खोज इस प्रश्न में आई, और जब मुझे मेरे लिए अच्छा समाधान मिला, तो मैं इसे आपके साथ साझा करना चाहता हूं अगर कोई इससे लाभ उठा सकता है। यहां यह है: एचटीएमएल:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

सीएसएस:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

जे एस:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

ग्राहक पहले ग्रे रंग के लिए कोई ज़रूरत नहीं चुनता है, इसलिए जेएस वर्ग place_holder को हटा देता है। मुझे उम्मीद है इससे किसी को सहायता मिलेगी :)

अद्यतन: आईई ब्राउज़र के लिए एक काम के रूप में @ user1096901 के लिए धन्यवाद, यदि आप पहले विकल्प का चयन फिर से करते हैं तो आप place_holder क्लास को दोबारा जोड़ सकते हैं :)


मैंने अभी नीचे दिए गए विकल्प में छिपी हुई विशेषता को जोड़ा है, यह मेरे लिए ठीक काम कर रहा है।

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


यह समाधान फ़ायरफ़ॉक्स में भी काम करता है:
किसी भी जेएस के बिना।

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


किसी भी जेएस या सीएसएस की आवश्यकता नहीं है, केवल 3 विशेषताएं:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

यह विकल्प बिल्कुल नहीं दिखाता है, बस विकल्प के मान को डिफ़ॉल्ट के रूप में सेट करता है।

हालांकि, अगर आपको प्लेसहोल्डर पसंद नहीं है जो बाकी के समान रंग है , तो आप इसे इस तरह की इनलाइन ठीक कर सकते हैं:

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

जाहिर है, आप कार्यों को कम से कम चुनिंदा सीएसएस को अलग फाइलों में विभाजित कर सकते हैं।

नोट: ऑनलोड फ़ंक्शन रीफ्रेश बग को ठीक करता है।


मैं इनमें से कोई भी वर्तमान में काम करने के लिए नहीं मिला, क्योंकि मेरे लिए यह (1) आवश्यक नहीं है और (2) डिफ़ॉल्ट चयन करने योग्य विकल्प पर वापस जाने की आवश्यकता है। यदि आप jquery का उपयोग कर रहे हैं तो यहां एक भारी हाथ विकल्प है:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


बदलाव के लिए इसे आज़माएं

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});

मैं सही उत्तरों के संकेत देखता हूं लेकिन इसे एक साथ लाने के लिए यह मेरा समाधान होगा।

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


जेएस में एक और संभावना:

 $('body').on('change','select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color','#999');
        $(this).children().css('color','black');
    }
    else {
        $(this).css('color','black');
        $(this).children().css('color','black');
    }
});

JSFiddle


मेरा योगदान यहाँ है। एचएएमएल + कॉफ़ीस्क्रिप्ट + एससीएसएस

HAML
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS
select option {
  color: black;
}

सर्वर कोड को बदलकर केवल सीएसएस का उपयोग करना संभव है और केवल संपत्ति के वर्तमान मूल्य के आधार पर कक्षा शैलियों को सेट करना संभव है, लेकिन इस तरह से यह आसान और साफ दिखता है।

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

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

जब आप खुलते हैं प्लेसहोल्डर ग्रे को रखने के लिए आप अधिक सीएसएस ( select option:first-child ) जोड़ सकते हैं, लेकिन मुझे इसकी परवाह नहीं है।


यह रहा मेरा

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


ऐसा कुछ हो सकता है?

HTML:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

सीएसएस:

#choice option { color: black; }
.empty { color: gray; }

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

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

कार्य उदाहरण: http://jsfiddle.net/Zmf6t/


आप केवल HTML का उपयोग करके Javascript का उपयोग किए बिना ऐसा कर सकते हैं आपको डिफ़ॉल्ट चयन विकल्प disabled="" और selected="" और required="". टैग का चयन करें required="". ब्राउज़र उपयोगकर्ता को विकल्प चुनने के बिना फॉर्म जमा करने की अनुमति नहीं देता है।

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

मैं एचटीएमएल के इस टुकड़े के लिए चुने जाने तक चयन ग्रे होना चाहता था:

<select>
  <option value="" disabled selected>Select your option</option>
  <option value="hurr">Durr</option>
</select>

मैंने इन सीएसएस परिभाषाओं को जोड़ा है:

select { color: grey; }
select:valid { color: black; }

यह क्रोम / सफारी में शायद ही काम करता है, शायद अन्य ब्राउज़रों में भी, लेकिन मैंने चेक नहीं किया है।


मुझे एहसास है कि मैं खेल के लिए बहुत देर हो चुकी हूं, लेकिन यह एक बहुत ही लोकप्रिय सवाल है, और मुझे हाल ही में एक ऐसा दृष्टिकोण मिला है जिसे मैंने यहां कहीं भी नहीं देखा है, इसलिए मुझे लगा कि मैं इसे दस्तावेज दूंगा।

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

संपादित करें: दोनों तत्वों को सही ढंग से कार्य करने के लिए एक ही चौड़ाई होना चाहिए।





html css html5 html-select placeholder