Html 选择标签的占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17603055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
placeholder for select tag
提问by Dalton Pereira
Is it possible to have a placeholder on a select tag?
是否可以在选择标签上放置占位符？
<select placeholder="select your beverage">
<option>Tea</option>
<option>coffee</option>
<option>soda</option>
</select>
or may be a possible work around?
或者可能是一个可能的解决方法？
采纳答案by General_Twyckenham
EDIT: This did/does work at the time I wrote it, but as Blexen pointed out, it's not in the spec.
编辑：这在我编写它时确实/确实有效，但正如 Blexen 指出的那样，它不在规范中。
Add an option like so:
添加一个选项，如下所示：
<option default>Select Your Beverage</option>
The correct way:
正确的方法：
<option selected="selected">Select Your Beverage</option>
回答by SeinopSys
According to Mozilla Dev Network, placeholderis not a valid attribute on a <select>input.
根据Mozilla Dev Network，placeholder不是<select>输入的有效属性。
Instead, add an option with an empty valueand the selectedattribute, as shown below. The empty valueattribute is mandatory to prevent the default behaviour which is to use the contents of the <option>as the <option>'s value.
相反，添加一个带有空value和selected属性的选项，如下所示。emptyvalue属性是强制性的，以防止默认行为，即使用 的内容<option>作为<option>的值。
<select>
<option value="" selected>select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
In modern browsers, adding the requiredattribute to the <select>element will not allow the user to submit the form which the element is part of if the selected option has an empty value.
在现代浏览器中，如果所选选项具有空值，则将required属性添加到<select>元素将不允许用户提交该元素所属的表单。
If you want to style the default option inside the list (which appears when clicking the element), there's a limited number of CSS properties that are well-supported. colorand background-colorare the 2 safest bets, other CSS properties are likely to be ignored.
如果您想为列表中的默认选项（单击元素时出现）设置样式，则支持的 CSS 属性数量有限。color并且background-color是 2 个最安全的赌注，其他 CSS 属性可能会被忽略。
In my option the best way (in HTML5) to mark the default option is using the custom data-*attributes.1Here's how to style the default option to be greyed out:
在我的选项中，标记默认选项的最佳方式（在 HTML5 中）是使用自定义data-*属性。1以下是将默认选项设置为灰色的方法：
select option[data-default] {
color: #888;
}<select>
<option value="" selected data-default>select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>However, this will only style the item inside the drop-down list, not the value displayed on the input. If you want to style that with CSS, target your <select>element directly. In that case, you can only change the style of the currently selected element at any time.2
但是，这只会设置下拉列表中的项目的样式，而不是显示在输入上的值。如果您想使用 CSS 设置样式，请<select>直接定位您的元素。在这种情况下，您只能随时更改当前选定元素的样式。2
If you wanted to make it slightly harder for the user to select the default item, you could set the display: none;CSS rule on the <option>, but remember that this will notprevent users from selecting it (using e.g. arrow keys/typing), this just makes it harder for them to do so.
如果您想让用户选择默认项目稍微困难一些，您可以在 上设置display: none;CSS 规则<option>，但请记住，这不会阻止用户选择它（例如使用箭头键/键入），这只会使它他们更难做到这一点。
1This answer previously advised the use of a defaultattribute which is non-standard and has no meaning on its own.
2It's technically possible to style the select itself based on the selected value using JavaScript, but that's outside the scope of this question. This answer, however, covers this method.
1此答案以前建议使用default非标准且本身没有意义的属性。
2从技术上讲，可以使用 JavaScript 根据所选值设置选择本身的样式，但这超出了本问题的范围。然而，这个答案涵盖了这种方法。
回答by manish mohanan
<select>
<option selected="selected" class="Country">Country Name</option>
<option value="1">India</option>
<option value="2">us</option>
</select>
.country
{
display:none;
}
</style>
回答by Thusitha Wickramasinghe
Yes it is possible
对的，这是可能的
You can do this using only
HTMLYou need to set default select optiondisabled=""andselected=""and select tagrequired="". Browser doesn't allow user to submit the form without selecting an option.
为此，可以使用只能做
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>
回答by Andrey Kartavtsev
This my function for select box placeholder.
这是我用于选择框占位符的函数。
HTML
HTML
<select name="country" id="country">
<option value="" disabled selected>Country</option>
<option value="c1">England</option>
<option value="c2">Russia</option>
<option value="c3">USA</option>
</select>
jQuery
jQuery
jQuery(function($) {
/*function for placeholder select*/
function selectPlaceholder(selectID){
var selected = $(selectID + ' option:selected');
var val = selected.val();
$(selectID + ' option' ).css('color', '#333');
selected.css('color', '#999');
if (val == "") {
$(selectID).css('color', '#999');
};
$(selectID).change(function(){
var val = $(selectID + ' option:selected' ).val();
if (val == "") {
$(selectID).css('color', '#999');
}else{
$(selectID).css('color', '#333');
};
});
};
selectPlaceholder('#country');
});
回答by Yevgeniy Afanasyev
There is a Select2 plugin allowing to set a lot of cool stuff along with placeholder. It is a jQuery replacement for select boxes. Here is an official site https://select2.github.io/examples.html
有一个 Select2 插件允许设置很多很酷的东西以及占位符。它是选择框的 jQuery 替代品。这是一个官方网站https://select2.github.io/examples.html
The thing is - if you want to disable fancy search option, please use the following option set.
问题是 - 如果您想禁用花哨的搜索选项，请使用以下选项集。
data-plugin-options='
{
"placeholder": "Select status",
"allowClear": true,
"minimumResultsForSearch": -1
}
Especially I like the allowClear option.
我特别喜欢 allowClear 选项。
Thank you.
谢谢你。
回答by Amitpal Singh
No need to take any javscript or any method you can just do it with your html css
无需使用任何 javscript 或任何方法，您只需使用 html css 即可
HTML
HTML
<select id="myAwesomeSelect">
<option selected="selected" class="s">Country Name</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
Css
css
.s
{
color:white;
font-size:0px;
display:none;
}
回答by ayush baran
<select>
<option value="" disabled selected style="display: none;"> placeholder</option>
<option value="op1">op1</option>
<option value="op2">op2</option>
<option value="op3">op3</option>
<option value="op4">op4</option>
</select>
回答by Shanmugam Jayaraman
Try this
尝试这个
HTML
HTML
<select class="form-control"name="country">
<option class="servce_pro_disabled">Select Country</option>
<option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option>
</select>
CSS
CSS
.form-control option:first-child {
display: none;
}
回答by user5515679
<select>
<option disabled selected>select your beverage</option>
<option >Tea</option>
<option>coffee</option>
<option>soda</option>
</select>
