如何为“select”框创build一个占位符？

我正在使用占位符的文本input工作正常。 但是我想为我的select框使用一个占位符。 当然，我可以使用这个代码：

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

但是“select你的select”是黑色而不是浅灰色。 所以我的解决scheme可能是基于CSS的。 jQuery也很好。

这只会使下拉选项变灰（所以点击箭头后）：

 option:first { color: #999; } 

编辑：问题是：人们如何在select框中创build占位符？ 但已经回答了，欢呼声。

并使用这个结果在选定的值总是灰色的（即使在select一个实际的选项后）：

 select { color:#999; } 

Answer 1

怎么样一个非CSS – 没有JavaScript / jQuery的答案？

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

Answer 2

只是偶然发现了这个问题，这是FireFox和Chrome（至less）

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

Answer 3

对于一个必需的领域，在现代浏览器中有一个纯粹的CSS解决scheme：

 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> 

Answer 4

这样的事情可能吗？

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> 

CSS：

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

JavaScript的：

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

工作示例： http : //jsfiddle.net/Zmf6t/

Answer 5

我只是在下面的选项中添加隐藏的属性，对我来说工作正常。

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

Answer 6

该解决scheme也适用于FireFox：
没有任何JS。

 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> 

Answer 7

我遇到了同样的问题，在search过程中遇到了这个问题，在我find了很好的解决scheme之后，我想和大家分享一下，以便有些人可以从中受益。 这里是：HTML：

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

CSS：

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

JS：

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

客户做出select后不需要灰色，所以JS去掉类place_holder 。 我希望这可以帮助别人:)

更新：感谢@ user1096901，作为IE浏览器的解决scheme，您可以再次添加place_holder类，以防再次select第一个选项:)

Answer 8

我看到正确答案的迹象，但把这一切，这将是我的解决scheme。

 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> 

Answer 9

这是我的

 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> 

Answer 10

JS中的另一个可能性：

  $('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

Answer 11

这是一个精美的CSS解决scheme。 内容被添加（并且相对于容器绝对定位）在包含元素之后（ 通过：在伪类之后 ）。 它从占位符属性中获取我使用指令（ attr（placeholder） ）所在的位置的文本。 另一个关键因素是指针事件：无 – 这允许点击占位符文本通过select。 否则，如果用户单击文本，它将不会下降。

我在我的select指令中自己添加了.empty类，但是通常我会发现这个angular色为我添加/删除了.ng-empty （我假设它是b / c我在我的代码示例中注入了Angular版本1.2）

（该示例还演示了如何在angularJS中包装HTML元素以创build您自己的自定义input）

 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> 

Answer 12

你可以在不使用Javascript情况下使用HTML你需要设置默认的select选项disabled=""和selected=""并selecttag required="". 浏览器不允许用户在未select选项的情况下提交表单。

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

Answer 13

我目前无法得到任何这些工作，因为对我来说，它是（1）不需要和（2）需要选项返回到默认select。 所以如果你使用的是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> 

Answer 14

我希望SELECT是灰色的，直到为这段HTML选中为止：

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

我已经添加了这些CSS定义：

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

它在Chrome / Safari中按预期工作，也许在其他浏览器中，但我没有检查。

Answer 15

这是我的贡献。 HAML +咖啡+ SCSS

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

通过更改服务器代码并仅根据属性的当前值设置类样式，可以仅使用CSS，但这种方式看起来更简单和更清晰。

 $('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> 

Answer 16

关于上述所有解决scheme，由于HTML规范，这一个似乎是最有效的：

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

更新：请原谅我这个不正确的答案，这绝对不是一个select元素的占位符解决scheme，而是打开的select元素列表下的分组选项的标题。