我正在使用占位符进行文本输入,这很好。但我也想为我的选择框使用占位符。当然我可以使用这段代码:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但是“选择你的选项”是黑色而不是光线。所以我的解决方案可能是基于CSS的。 jQuery也很好。
这只会使下拉列表中的选项变为灰色(因此点击箭头后):
option:first {
color: #999;
}
编辑:问题是:人们如何在选择框中创建占位符?但它已经得到了回答,欢呼。
使用此选项会导致所选值始终为灰色(即使选择了实际选项后):
select {
color:#999;
}
非CSS怎么样 - 没有javascript / jQuery的答案?
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</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: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>
用户不应在选择选项中看到占位符。我建议使用hidden
属性作为占位符选项,你不需要selected
属性这个选项,你可以把它作为第一个。
select:not(:valid){
color: #999;
}
<select required>
<option value="" hidden>Select your option</option>
<option value="0">First option</option>
<option value="1">Second option</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');
}
});
如果你使用角度像这样
<select>
<option [ngValue]="undefined" disabled selected>Select your option</option>
<option [ngValue]="hurr">Durr</option>
</select>
HTML + CSS
solution worked for me:form select:invalid {
color: gray;
}
form select option:first-child {
color: gray;
}
form select:invalid option:not(:first-child) {
color: black;
}
<form>
<select required>
<option value="">Select Planet...</option>
<option value="earth">Earth</option>
<option value="pandora">Pandora</option>
</select>
</form>
祝好运...
我目前无法使用其中任何一个,因为对我来说,它是(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>
这是一个可以很好地工作的CSS解决方案。在包含元素之后添加内容(并且相对于容器绝对定位)(via:after pseudo-class)。它从我定义的占位符属性获取其文本,我使用了该指令(attr(占位符))。另一个关键因素是指针事件:无 - 这允许对占位符文本的点击传递给选择。否则,如果用户单击文本,则不会下拉。
我在我的select指令中自己添加了.empty类,但通常我发现angular为我添加/删除.ng-empty(我假设它是b / c我在我的代码示例中注入了Angular 1.2版)
(该示例还演示了如何在angularJS中包装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>
[type="text"]
Style Placeholder for Select Elements以下解决方案模拟占位符,因为它与input[type="text"]
元素相关:
$('.example').change(function () {
$(this).css('color', $(this).val() === '' ? '#999' : '#555');
});
.example {
color: #999;
}
.example > option {
color: #555;
}
.example > option[value=""] {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="example">
<option value="">Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
你可以不使用
Javascript
而只使用HTML
这样做你需要设置默认选择选项disabled=""
和selected=""
并选择标签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>
只是偶然发现了这个问题,这里有什么适用于FireFox和Chrome(至少)
<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'
风格只是使列表框看起来“不错”。
注意:在“占位符”选项上使用空的value
属性允许验证(必需属性)解决具有“占位符”的问题,因此如果选项未更改但需要;浏览器应提示用户从列表中选择一个选项。
更新(2015年7月):
在以下浏览器中确认此方法:
更新(2015年10月):
删除了style="display: none"
,转而支持广泛支持的HTML5属性hidden
。 hidden
元素与Safari中的display: none
具有相似的特征,IE,(项目Spartan需要检查),其中option
在下拉列表中可见,但不可选择。
更新(2016年1月):
当select
元素是required
时,它允许使用:invalid
CSS伪类,它允许你在select
元素处于“占位符”状态时设置样式。由于占位符:invalid
的空值,option
在这里工作。
一旦设置了值,:invalid
伪类将被删除。如果您愿意,也可以选择使用:valid
。
大多数浏览器都支持这种伪类。 IE10 +。这适用于自定义风格的select
元素;在某些情况下(例如Chrome / Safari中的Mac),您需要更改select
框的默认外观,以便显示某些样式,即background-color
,color
。您可以在developer.mozilla.org找到一些关于兼容性的示例和更多信息。
Chrome中的原生元素外观Mac:
在Chrome中使用更改的边框元素Mac:
我希望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中可以正常运行,也可能在其他浏览器中运行,但我没有检查过。
试试这个改变
$("select").css("color","#757575");
$(document).on("change","select",function(){
if ($(this).val() != "") {
$(this).css("color","");
} else {
$(this).css("color","#757575");
}
});
我不满足于仅使用HTML / CSS的解决方案,因此我决定使用JS创建自定义select
。
这是我在过去30分钟内写的,因此可以进一步改进。
您所要做的就是创建一个包含少量数据属性的简单列表。代码会自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的input
来保存所选值,因此它可以在表单中使用。
输入:
<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>
输出:
<div class="ul-select-container">
<input type="hidden" name="role" class="hidden">
<div class="selected placeholder">
<span class="text">Role</span>
<span class="icon">▼</span>
</div>
<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>
</div>
应该是占位符的项目的文本显示为灰色。如果用户想要恢复他/她的选择,则可以选择占位符。同样使用CSS,可以克服select
的所有缺点(例如,无法选择样式)。
// 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"}, [
elem("span", {"class": "text"}, this.dataset.placeholder),
elem("span", {"class": "icon"}, "▼", true),
]);
var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
this.insertBefore(placeholder, this.children[0]);
container.appendChild(hidden);
container.appendChild(selected);
container.appendChild(this);
parent.insertBefore(container, refElem);
});
// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
var text = this.innerText;
var value = this.dataset.value || "";
var selected = this.parentElement.previousElementSibling;
var hidden = selected.previousElementSibling;
hidden.value = selected.dataset.value = value;
selected.children[0].innerText = text;
if (this.classList.contains("placeholder")) {
selected.classList.add("placeholder");
} else {
selected.classList.remove("placeholder");
}
selected.parentElement.classList.remove("visible");
});
// open select dropdown
$(".ul-select-container .selected").on("click", function() {
if (this.parentElement.classList.contains("visible")) {
this.parentElement.classList.remove("visible");
} else {
this.parentElement.classList.add("visible");
}
});
// close select when focus is lost
$(document).on("click", function(e) {
var container = $(e.target).closest(".ul-select-container");
if (container.length == 0) {
$(".ul-select-container.visible").removeClass("visible");
}
});
.ul-select-container {
width: 200px;
display: table;
position: relative;
margin: 1em 0;
}
.ul-select-container.visible ul {
display: block;
padding: 0;
list-style: none;
margin: 0;
}
.ul-select-container ul {
background-color: white;
border: 1px solid hsla(0, 0%, 60%);
border-top: none;
-webkit-user-select: none;
display: none;
position: absolute;
width: 100%;
z-index: 999;
}
.ul-select-container ul li {
padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
opacity: 0.5;
}
.ul-select-container ul li:hover {
background-color: dodgerblue;
color: white;
}
.ul-select-container ul li.placeholder:hover {
background-color: rgba(0, 0, 0, .1);
color: initial;
}
.ul-select-container .selected {
background-color: white;
padding: 3px 10px 4px;
padding: 2px 5px;
border: 1px solid hsla(0, 0%, 60%);
-webkit-user-select: none;
}
.ul-select-container .selected {
display: flex;
justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
font-size: .7em;
display: flex;
align-items: center;
opacity: 0.8;
}
.ul-select-container:hover .selected {
border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<ul class="select" data-placeholder="Sex" data-name="sex">
<li data-value="male">Male</li>
<li data-value="female">Female</li>
</ul>
更新:我对此进行了改进(使用向上/向下/输入键进行选择)。稍微整理输出并将其转换为对象。当前输出:
<div class="li-select-container">
<input type="text" readonly="" placeholder="Role" title="Role">
<span class="arrow">▼</span>
<ul class="select">
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li data-value="user">User</li>
</ul>
</div>
初始化:
new Liselect(document.getElementsByTagName("ul")[0]);
更新:再次重写。我们可以使用select而不是列表。这样即使没有JS它也会工作(如果它被禁用)。
输入:
<select name="role" data-placeholder="Role" required title="Role">
<option value="admin">Administrator</option>
<option value="mod">Moderator</option>
<option>User</option>
</select>
new Advancelect(document.getElementsByTagName("select")[0]);
输出:
<div class="advanced-select">
<input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
<span class="arrow">▼</span>
<ul>
<li class="placeholder">Role</li>
<li data-value="admin">Administrator</li>
<li data-value="mod">Moderator</li>
<li>User</li>
</ul>
</div>
我喜欢上面接受的解决方案,没有JavaScript它很有用。
我只是想添加一下如何为受控选择的React Component采用这个答案,因为它花了我几次尝试来解决它。合并react-select
并完成它将非常简单,但除非你需要这个repo提供的令人惊奇的功能,我不支持该项目,所以不需要在我的包中添加任何更多的KB。请注意,react-select
通过各种inputs
和html
元素的复杂系统处理选择中的占位符。
在React中,对于controlled component,您无法将selected
属性添加到您的选项中。 React通过value
本身上的select
属性处理select的状态,以及更改处理程序,其中值应与选项本身中的一个值属性匹配。
例如,例如
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
{options}
</select>
因为它是不合适的,实际上会抛出一个错误,将selected
属性添加到其中一个选项,那么呢?
一旦你想到它,答案很简单。由于我们希望我们的第一个option
是selected
以及disabled
和hidden
,我们需要做三件事:
hidden
和disabled
属性添加到第一个定义的option
。option
的值设置为空字符串。select
的值初始化为空字符串。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>
现在您可以如上所示设置选择样式(或者如果您愿意,可以通过className
)
select:invalid { color: gray; }
在Angular中,我们可以添加一个选项作为占位符,可以隐藏在选项下拉列表中。我们甚至可以添加自定义下拉图标作为替换浏览器下拉图标的背景。
诀窍是仅在未选择值时启用占位符css
/ **我的组件模板* /
<div class="dropdown">
<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>
</div>
/ ** My Component.TS * /
constructor(fb: FormBuilder) {
this.myForm = this.fb.build({
myField: ''
});
}
/**global.伸出双手*/
.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;
}
}
}
这是一个working example如何用第一次点击后处理选项颜色的纯JavaScript来实现这个目的:
<!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>
<script>
// 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);
}
</script>
</body>
</html>
在选择的顶部创建标签
<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将其置于顶部
.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}
pointer-events: none
允许您在单击标签时显示选择,这在您选择选项时会隐藏。
这是我的贡献。 HAML + Coffeescript + 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>
您可以添加更多CSS(select option:first-child
)以在占位符打开时保持灰色,但我并不关心。
对于上面的所有解决方案,但由于HTML规范,这个似乎最有效:
<select>
<optgroup label="Your placeholder">
<option value="value">Label</option>
</optgroup>
</select>
更新:请原谅我这个错误的答案,这绝对不是select
元素的占位符解决方案,而是打开的select
元素列表下的分组选项的标题。
对于必填字段,现代浏览器中有一个纯CSS解决方案:
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();
我只是在下面的选项中添加了隐藏属性,它对我来说很好。
<select>
<option hidden>Sex</option>
<option>Male</option>
<option>Female</option>
</select>
该解决方案也适用于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>
我遇到了同样的问题,在搜索时遇到了这个问题,在我找到好的解决方案后,我想与你们分享,以防有人可以从中受益。这是: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");
});
在客户首先选择后不需要灰色,所以JS删除了类place_holder
。我希望这可以帮助别人 :)
更新:感谢@ user1096901,作为IE浏览器的解决方案,你可以再次添加place_holder
类,以防再次选择第一个选项:)
不需要任何JS或CSS,只需要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分离为单独的文件。
注意:onload函数可以纠正刷新错误。
在这里我修改了大卫的答案(接受了答案)。在他的回答中,他在选项标签上添加了禁用和选择的属性,但是当我们也放置隐藏标签时,它看起来会更好。通过在选项标签上添加额外的隐藏属性,将阻止在选择“Durr”选项后重新选择“选择您的选项”选项。
<select>
<option value="" disabled selected hidden>Select your option</option>
<option value="hurr">Durr</option>
</select>