How do I make a placeholder for a 'select' box?
我使用占位符来输入文本,这样做很好。但我也希望为我的选择框使用一个占位符。当然,我可以使用以下代码:
1 2 3 4 | <select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select> |
但是"选择你的选项"是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jquery也很好。
这只会使下拉列表中的选项变灰(因此单击箭头后):
1 2 3 | option:first { color: #999; } |
编辑:问题是:人们如何在选择框中创建占位符?但它已经被回答了,干杯。
并且使用此选项会导致所选值始终为灰色(即使在选择实际选项之后):
1 2 3 | select { color:#999; } |
一个非css的-没有javascript/jquery的答案如何?
1 2 3 4 | <select> <option value="" disabled selected>Select your option</option> <option value="hurr">Durr</option> </select> |
刚刚偶然发现这个问题,下面是Firefox&chrome(至少)的工作原理。
1 2 3 4 5 6 7 8 9 10 | <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> |
禁用选项停止使用鼠标和键盘选择
注意:在"placeholder"选项上使用空的
更新(2015年7月):
此方法已在以下浏览器中确认工作正常:
- 谷歌Chrome-v.43.0.2357.132
- Mozilla Firefox-第39.0版
- Safari-V.8.0.7(占位符在下拉列表中可见,但不可选)
- Microsoft Internet Explorer-V.11(占位符在下拉列表中可见,但不可选)
- Project Spartan-V.15.10130(占位符在下拉列表中可见,但不可选)
更新(2015年10月):
删除了
更新(2016年1月):
当
一旦设置了一个值,将删除
大多数浏览器都支持这个伪类。IE10+这对自定义样式的
Chrome中的本机元素外观Mac:
在Chrome中使用更改的border元素mac:
对于一个必需的字段,现代浏览器中有一个纯粹的CSS解决方案:
1 2 3 4 5 6 7 8 9 | select:required:invalid { color: gray; } option[value=""][disabled] { display: none; } option { color: black; } |
1 2 3 4 5 | <select required> <option value="" disabled selected>Select something...</option> <option value="1">One</option> <option value="2">Two</option> </select> |
也许是这样?
HTML:
1 2 3 4 5 6 | <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:
1 2 | #choice option { color: black; } .empty { color: gray; } |
JavaScript:
1 2 3 4 5 6 | $("#choice").change(function () { if($(this).val() =="0") $(this).addClass("empty"); else $(this).removeClass("empty") }); $("#choice").change(); |
工作示例:http://jsfiddle.net/zmf6t/
我刚在下面的选项中添加了隐藏属性,它对我来说很好。
1 2 3 4 5 | <select> <option hidden>Sex</option> <option>Male</option> <option>Female</option> </select> |
该解决方案也适用于Firefox:没有任何JS。
1 2 3 | option[default] { display: none; } |
1 2 3 4 5 6 7 | <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> |
我也遇到了同样的问题,在搜索过程中遇到了这个问题,在我找到了很好的解决方案之后,我想和你们分享一下,以防有人能从中受益。这里是:HTML:
1 2 3 4 5 6 7 | <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:
1 2 3 4 5 6 | .place_holder{ color: gray; } option{ color: #000000; } |
JS:
1 2 3 | jQuery(".dropdown").change(function () { jQuery(this).removeClass("place_holder"); }); |
在客户第一次选择不需要灰色后,JS删除了类
更新:由于@user1096901,作为IE浏览器的解决方案,如果再次选择第一个选项,可以再次添加
不需要任何JS或CSS,只需要3个属性:
1 2 3 4 5 6 7 | <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> |
它根本不显示选项,只将选项的值设置为默认值。
但是,如果您不喜欢与其他颜色相同的占位符,您可以这样内联修复它:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> Placeholder for select tag drop-down menu </head> <body onloadx="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分隔成单独的文件。
注意:onload函数修正了刷新错误。
我看到了正确答案的迹象,但要把它们结合起来,这将是我的解决方案。
1 2 3 4 5 6 7 8 9 10 11 | select{ color: grey; } option { color: black; } option[default] { display: none; } |
1 2 3 4 | <select> <option value="" default selected>Select your option</option> <option value="hurr">Durr</option> </select> |
这是我的
1 2 3 | select:focus option.holder { display: none; } |
1 2 3 4 5 6 | <select> <option selected="selected" class="holder">Please select</option> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> |
这里我修改了大卫的答案(接受的答案)。在他的答案中,他将禁用和选择的属性放在选项标签上,但是当我们也放置隐藏标签时,它看起来会更好。通过在选项标记上添加一个额外的隐藏属性,将阻止在选择"durr"选项后重新选择"选择您的选项"。
1 2 3 4 | <select> <option value="" disabled selected hidden>Select your option</option> <option value="hurr">Durr</option> </select> |
用户不应在"选择选项"中看到占位符。我建议使用
1 2 3 | select:not(:valid){ color: #999; } |
1 2 3 4 5 | <select required> <option value="" hidden>Select your option</option> <option value="0">First option</option> <option value="1">Second option</option> </select> |
If you are using angular go like this
1 2 3 4 | <select> <option [ngValue]="undefined" disabled selected>Select your option</option> <option [ngValue]="hurr">Durr</option> </select> |
JS中的另一种可能性:
1 2 3 4 5 6 7 8 9 10 | $('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'); } }); |
杰西德
我目前无法让这些选项中的任何一个工作,因为对我来说,(1)不需要,并且(2)需要返回到默认的可选选项。因此,如果您使用jquery,这里有一个很重的选项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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(); }); |
1 2 3 | option{ color: #555; } |
1 2 3 4 5 6 7 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <select name="in-op"> <option default selected>Select Option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> |
这是一个运行良好的CSS解决方案。在包含元素(via:after pseudo class)之后添加内容(并绝对相对于容器定位)。它的文本来自我在使用指令的地方定义的占位符属性(attr(placeholder))。另一个关键因素是指针事件:无-这允许单击占位符文本传递给选择。否则,如果用户单击文本,它不会下拉。
我自己在select指令中添加了.empty类,但通常我发现angular为我添加/删除.ng是空的(我假设它是b/c,我在代码示例中注入了angular的1.2版本)
(该示例还演示了如何在AngularJS中包装HTML元素以创建自己的自定义输入)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 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; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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; } |
1 2 3 4 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select> |
这个
1 2 3 4 5 6 7 8 9 10 11 | form select:invalid { color: gray; } form select option:first-child { color: gray; } form select:invalid option:not(:first-child) { color: black; } |
1 2 3 4 5 6 7 | <form> <select required> <option value="">Select Planet...</option> <option value="earth">Earth</option> <option value="pandora">Pandora</option> </select> </form> |
祝你好运。。。
You can do this without using
Javascript using onlyHTML You need to set default select option
disabled="" andselected="" and select tagrequired="". Browser
doesn't allow user to submit the form without selecting an option.
1 2 3 4 5 6 7 8 9 | <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元素输入
以下解决方案模拟与
1 2 3 | $('.example').change(function () { $(this).css('color', $(this).val() === '' ? '#999' : '#555'); }); |
1 2 3 4 5 6 7 8 9 10 11 | .example { color: #999; } .example > option { color: #555; } .example > option[value=""] { color: #999; } |
1 2 3 4 5 6 7 8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <select class="example"> <option value="">Select Option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> |
下面是一个如何使用纯javascript实现此目的的工作示例,它在第一次单击后处理选项颜色:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <style> #myselect{ color:gray; } </style> </head> <body> <select id="myselect"> <option disabled selected>Choose Item </option> <option>Item 1 </option> <option>Item 2 </option> <option>Item 3 </option> </select> // add event listener to change color in the first click document.getElementById("myselect").addEventListener("click",setColor) function setColor() { var combo = document.getElementById("myselect"); combo.style.color = 'red'; // remove Event Listener after the color is changed at the first click combo.removeEventListener("click", setColor); } </body> </html> |
我希望选择是灰色的,直到选中为止,所以对于这段HTML:
1 2 3 4 | <select> <option value="" disabled selected>Select your option</option> <option value="hurr">Durr</option> </select> |
我添加了这些CSS定义:
1 2 | select { color: grey; } select:valid { color: black; } |
它在Chrome/Safari中可以正常工作,可能在其他浏览器中也可以,但我没有检查过。
角2的解
在所选内容的顶部创建标签
1 2 3 4 5 6 7 | <label class="hidden-label" for="IsActive" *ngIf="filterIsActive == undefined">Placeholder text</label> <select class="form-control form-control-sm" type="text" name="filterIsActive" [(ngModel)]="filterIsActive" id="IsActive"> <option value="true">true</option> <option value="false">false</option> </select> |
并应用CSS将其放置在顶部
1 2 3 4 5 6 7 | .hidden-label { position: absolute; margin-top: .34rem; margin-left: .56rem; font-style: italic; pointer-events: none; } |
角HTML CSS
试试这个换一下
1 2 3 4 5 6 7 8 | $("select").css("color","#757575"); $(document).on("change","select",function(){ if ($(this).val() !="") { $(this).css("color",""); } else { $(this).css("color","#757575"); } }); |
我不满足于只使用HTML/CSS的解决方案,所以我决定使用JS创建一个自定义的
这是我在过去30分钟里写的,因此可以进一步改进。
您所要做的就是创建一个具有少量数据属性的简单列表。代码会自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的
输入:
1 2 3 4 5 6 7 8 9 10 11 12 | <ul class="select" data-placeholder="Role" data-name="role"> <li data-value="admin">Administrator </li> <li data-value="mod">Moderator </li> <li data-value="user">User </li> </ul> |
输出:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <input type="hidden" name="role" class="hidden"> <span class="text">Role</span> <span class="icon">▼</span> <ul class="select" data-placeholder="Role" data-name="role"> <li class="placeholder">Role </li> <li data-value="admin">Administrator </li> <li data-value="mod">Moderator </li> <li data-value="user">User </li> </ul> |
应该是占位符的项目文本将灰显。占位符是可选的,以防用户希望恢复其选择。同样,使用CSS,可以克服
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | // helper function to create elements faster/easier // https://github.com/akinuri/js-lib/blob/master/element.js var elem = function(tagName, attributes, children, isHTML) { let parent; if (typeof tagName =="string") { parent = document.createElement(tagName); } else if (tagName instanceof HTMLElement) { parent = tagName; } if (attributes) { for (let attribute in attributes) { parent.setAttribute(attribute, attributes[attribute]); } } var isHTML = isHTML || null; if (children || children == 0) { elem.append(parent, children, isHTML); } return parent; }; elem.append = function(parent, children, isHTML) { if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) { if (children instanceof Text || typeof children =="string" || typeof children =="number") { parent.value = children; } else if (children instanceof Array) { children.forEach(function(child) { elem.append(parent, child); }); } else if (typeof children =="function") { elem.append(parent, children()); } } else { if (children instanceof HTMLElement || children instanceof Text) { parent.appendChild(children); } else if (typeof children =="string" || typeof children =="number") { if (isHTML) { parent.innerHTML += children; } else { parent.appendChild(document.createTextNode(children)); } } else if (children instanceof Array) { children.forEach(function(child) { elem.append(parent, child); }); } else if (typeof children =="function") { elem.append(parent, children()); } } }; // initialize all selects on the page $("ul.select").each(function() { var parent = this.parentElement; var refElem = this.nextElementSibling; var container = elem("div", {"class":"ul-select-container"}); var hidden = elem("input", {"type":"hidden","name": this.dataset.name,"class":"hidden"}); var selected = elem("div", {"class":"selected placeholder <p><center>[wp_ad_camp_5]</center></p><hr><P>我喜欢上面接受的解决方案,它在没有javascript的情况下工作得很好。</P><P>我只是想补充一下,我是如何为一个受控的选择反应组件采用这个答案的,因为我花了几次时间才弄明白。合并<wyn>react-select</wyn>并完成它是非常简单的,但是除非您需要这个repo提供的惊人的功能,我不需要为这个项目提供这些功能,否则就不需要再向我的包中添加任何kbs了。注:<wyn>react-select</wyn>通过各种<wyn>inputs</wyn>和<wyn>html</wyn>元素的复杂系统处理选择中的占位符。</P><P>在react中,对于受控组件,不能将<wyn>selected</wyn>属性添加到选项中。react通过<wyn>select</wyn>本身上的<wyn>value</wyn>属性以及一个更改处理程序来处理select的状态,其中值应该与选项本身中的一个值属性匹配。</P><P>例如</P>[cc lang="css"]<select value={this.state.selectValue} onChange={this.handleChange} required={true}> {options} </select> |
既然将
一想到这个问题,答案就很简单了。由于我们希望我们的第一个
1 2 3 4 5 6 7 | state = { selectValue ="" } //state or props or their equivalent // in the render function <select value={this.state.selectValue} onChange={this.handleChange} required={true}> <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option> {renderOptions()} </select> |
现在,您可以按照上面所示设置选择样式(如果愿意,也可以通过
1 | select:invalid { color: gray; } |
在Angular中,我们可以添加一个选项作为可隐藏在选项下拉列表中的占位符。我们甚至可以添加一个自定义下拉图标作为背景,取代浏览器下拉图标。
技巧是仅在未选择值时启用占位符CSS
/**我的组件模板*/
1 2 3 4 5 6 | <select [ngClass]="{'placeholder': !myForm.value.myField}" class="form-control" formControlName="myField"> <option value="" hidden >Select a Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> |
/**我的组件.ts*/
1 2 3 4 5 | constructor(fb: FormBuilder) { this.myForm = this.fb.build({ myField: '' }); } |
/**全球.scss*/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .dropdown { width: 100%; height: 30px; overflow: hidden; background: no-repeat white; background-image:url('angle-arrow-down.svg'); background-position: center right; select { background: transparent; padding: 3px; font-size: 1.2em; height: 30px; width: 100%; overflow: hidden; /*For moz*/ -moz-appearance: none; /* IE10 */ &::-ms-expand { display: none; } /*For chrome*/ -webkit-appearance:none; &.placeholder { opacity: 0.7; color: theme-color('mutedColor'); } option { color: black; } } } |
这是我的贡献。哈姆+咖啡描述+SCSS
1 | =f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control' |
1 2 3 4 5 6 | $('select').on 'change', -> if $(this).val() $(this).css('color', 'black') else $(this).css('color', 'gray') $('select').change() |
1 2 3 | select option { color: black; } |
通过更改服务器代码和仅根据属性的当前值设置类样式,可以只使用CSS,但这种方法似乎更简单、更清晰。
1 2 3 4 5 6 7 8 9 | $('select').on('change', function() { if ($(this).val()) { return $(this).css('color', 'black'); } else { return $(this).css('color', 'gray'); } }); $('select').change(); |
1 2 3 | select option { color: black; } |
1 2 3 4 5 6 7 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <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> |
您可以添加更多的CSS(
对于上述所有解决方案,但由于HTML规范,此解决方案似乎最有效:
1 2 3 4 5 | <select> <optgroup label="Your placeholder"> <option value="value">Label</option> </optgroup> </select> |
更新:请原谅我回答不正确,这绝对不是