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




css html5 (12)

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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color:#999;
}

आप केवल 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: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>


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

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/


किसी भी जेएस या सीएसएस की आवश्यकता नहीं है, केवल 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>

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

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


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

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

बस इस सवाल पर ठोकर खाई, फ़ायरफ़ॉक्स और क्रोम में क्या काम करता है (कम से कम)

<style>
    select:invalid { color: gray; }
</style>
<form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
</form>

अक्षम विकल्प <option> माउस और कीबोर्ड दोनों के साथ चुना जा रहा है, जबकि 'display:none' का उपयोग करने से उपयोगकर्ता को कीबोर्ड तीर के माध्यम से अभी भी चयन करने 'display:none' अनुमति मिलती है। 'display:none' शैली सिर्फ सूची बॉक्स को 'अच्छा' दिखती है।

नोट: "प्लेसहोल्डर" विकल्प पर खाली value विशेषता का उपयोग करने से सत्यापन (आवश्यक विशेषता) "प्लेसहोल्डर" के आसपास काम करने की अनुमति देता है, इसलिए यदि विकल्प नहीं बदला गया है लेकिन आवश्यक है; ब्राउज़र को उपयोगकर्ता को सूची से एक विकल्प चुनने के लिए संकेत देना चाहिए।

अपडेट (जुलाई 2015):

इस विधि को निम्न ब्राउज़रों में काम करने की पुष्टि की गई है:

  • Google क्रोम - v.43.0.2357.132
  • मोज़िला फ़ायरफ़ॉक्स - v.39.0
  • सफारी - v.8.0.7 (प्लेसहोल्डर ड्रॉपडाउन में दिखाई देता है लेकिन चयन योग्य नहीं है)
  • माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर - v.11 (प्लेसहोल्डर ड्रॉपडाउन में दिखाई देता है लेकिन चयन योग्य नहीं है)
  • प्रोजेक्ट स्पार्टन - v.15.10130 (प्लेसहोल्डर ड्रॉपडाउन में दिखाई देता है लेकिन चयन योग्य नहीं है)

अपडेट (अक्टूबर 2015):

एचटीएमएल 5 विशेषता के पक्ष में style="display: none" hidden जिसमें व्यापक समर्थन है। hidden तत्व में display: none समान लक्षण display: none सफारी, आईई में display: none , (परियोजना स्पार्टन को जांच की आवश्यकता है) जहां option ड्रॉपडाउन में दिखाई देता है लेकिन चयन योग्य नहीं है।

अपडेट (जनवरी 2016):

जब select तत्व की required यह :invalid सीएसएस छद्म-वर्ग का उपयोग करने की अनुमति देता है जो आपको "प्लेसहोल्डर" स्थिति में select तत्व को स्टाइल करने की अनुमति देता है। :invalid प्लेसहोल्डर option में खाली मूल्य के कारण यहां :invalid कार्य करता है।

एक बार मान सेट हो जाने के बाद :invalid छद्म-वर्ग गिरा दिया जाएगा। आप वैकल्पिक रूप से भी उपयोग कर सकते हैं :valid यदि आप चाहें तो :valid

अधिकांश ब्राउज़र इस छद्म श्रेणी का समर्थन करते हैं। IE10 +। यह कस्टम स्टाइल select तत्वों के साथ सबसे अच्छा काम करता है; कुछ मामलों में यानी (क्रोम / सफारी में मैक) आपको select बॉक्स की डिफ़ॉल्ट उपस्थिति को बदलने की आवश्यकता होगी ताकि कुछ शैलियों का प्रदर्शन background-color , color । आप developer.mozilla.org पर संगतता के बारे में कुछ उदाहरण और अधिक पा सकते हैं।

क्रोम में मूल तत्व उपस्थिति मैक:

क्रोम में परिवर्तित सीमा तत्व मैक का उपयोग करना:


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

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 ) जोड़ सकते हैं, लेकिन मुझे इसकी परवाह नहीं है।


मैं इनमें से कोई भी वर्तमान में काम करने के लिए नहीं मिला, क्योंकि मेरे लिए यह (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{
  color: grey;
}

option {
  color: black;
}

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


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

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


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

मैं अपने चयन निर्देश में खुद को .empty वर्ग जोड़ता हूं लेकिन आम तौर पर मुझे लगता है कि कोणीय मेरे लिए .ng-blank जोड़ता / निकालता है (मुझे लगता है कि यह बी / सी है, मैं अपने कोड नमूने में कोणीय के संस्करण 1.2 इंजेक्शन कर रहा हूं)

(नमूना यह भी दर्शाता है कि अपने स्वयं के कस्टम इनपुट बनाने के लिए कोणीय जेएस में HTML तत्वों को कैसे लपेटें)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;

  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;

    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }

    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }

  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }

});
so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>





placeholder