如何为“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; } 

16 Solutions collect form web for “如何为“select”框创build一个占位符?”

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

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

只是偶然发现了这个问题,这是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> 

对于一个必需的领域,在现代浏览器中有一个纯粹的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> 

这样的事情可能吗?

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/

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

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

该解决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> 

我遇到了同样的问题,在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第一个选项:)

我看到正确答案的迹象,但把这一切,这将是我的解决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> 

这是我的

 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> 

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

这是一个精美的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> 

你可以在不使用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> 

我目前无法得到任何这些工作,因为对我来说,它是(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> 

我希望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中按预期工作,也许在其他浏览器中,但我没有检查。

这是我的贡献。 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> 

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

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

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

  • 新的HTML5inputtypes的ASP.NET MVC HTML帮助器方法
  • 文件input“接受”属性 - 是否有用?
  • 当localStorage已满时会发生什么?
  • 只使用Javascript会话cookie
  • 如何自定义使用CSS的HTML5input范围types?
  • 从HTML5 Canvas获取二进制(base64)数据(readAsBinaryString)
  • 如何添加一个简单的onClick事件处理程序到canvas元素?
  • 如何在iOS中自动播放媒体> = 4.2.1 Mobile Safari?
  • 大写或小写文档types?
  • 如何从Web应用程序访问手机的相机?
  • 如何使用Microdata元标记添加图像到事件?