小开

像这样的东西：

超文本标记语言：

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

小开

最佳答案

非CSS-没有JavaScript/jQuery答案：

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

更新（2021年12月）：

这适用于最新的Firefox，Chrome和Safari。正如评论中指出的那样，过去它不适用于许多浏览器。

小开

我只是偶然发现了这个问题，以下是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月）：

此方法已确认在以下浏览器中工作：

谷歌Chrome-v.43.0.2357.132
Mozilla Firefox-v.39.0
Safari-v.8.0.7（占位符在下拉列表中可见，但不可选择）
Microsoft Internet Explorer-v.11（占位符在下拉列表中可见，但不可选择）
Project Spartan-v.15.10130（占位符在下拉列表中可见，但不可选择）

更新（2015年10月）：

我删除了style="display: none"，取而代之的是HTML5属性hidden，它具有广泛的支持。hidden元素具有与Safari中的display: none相似的特征，Internet Explorer（Project Spartan需要检查），其中option在下拉列表中可见，但不可选择。

更新（2016年1月）：

当select元素是required时，它允许使用:invalid CSS伪类，它允许您在select元素处于“占位符”状态时为其设置样式。:invalid在这里工作，因为占位符option中的空值。

一旦设置了一个值，:invalid伪类将被删除。如果您愿意，您也可以选择使用:valid。

大多数浏览器支持这种伪类。Internet Explorer 10及更高版本。这最适合自定义样式的select元素；在某些情况下，即（Chrome/Safari中的Mac），您需要更改select框的默认外观，以便显示某些样式，即background-color和color。您可以在developer.mozilla.org中找到一些示例和有关兼容性的更多信息。

原生元素外观Mac在Chrome：

在Chrome中选择框原生Mac

在Chrome中使用更改的边框元素Mac：

Chrome中更改的Mac选择框

小开

下面的解决方案也适用于Firefox，没有任何JavaScript：

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>

小开

我看到了正确答案的迹象，但把它们放在一起，这将是我的解决方案：

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>

小开

JavaScript中的另一种可能性：

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

小开

我也遇到了同样的问题，在搜索的过程中，我遇到了这个问题，在我找到一个好的解决方案后，我想和你们分享，以防有人从中受益。

这里是：

超文本标记语言：

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

JavaScript：

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

客户进行第一次选择后，不需要灰色，因此JavaScript代码删除了类place_holder。

感谢@user1096901，作为Internet Explorer浏览器的解决方法，您可以再次添加place_holder类，以防再次选择第一个选项：）

小开

对于必填字段，现代浏览器中有一个纯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>

小开

我只是在下面的option中添加了一个隐藏属性。它对我来说工作正常。

<select><option hidden>Sex</option><option>Male</option><option>Female</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>

小开

您可以在不使用JavaScript且仅使用超文本标记语言的情况下执行此操作您需要设置默认的选择选项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>

小开

我希望SELECT在选择之前是灰色的，所以对于这段超文本标记语言：

<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和其他浏览器中按预期工作，但我还没有检查。

小开

这是一个效果很好的css解决方案。内容被添加到包含元素（via：伪类之后）之后（并且相对于容器的绝对位置）。

它从我使用指令（attr（占位符））定义的占位符属性中获取文本。另一个关键因素是指针事件类型-这允许单击占位符文本传递到选择。否则，如果用户单击文本，它不会下拉。

我在我的选择指令中自己添加了.空类，但通常我发现Angular为我添加/删除. ng为空（我假设这是因为我在代码示例中注入了Angular的1.2版）。

（该示例还演示了如何在AngularJS中包装超文本标记语言元素以创建自己的自定义输入）

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>

小开

我目前无法让其中任何一个工作，因为对我来说，它是（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>

小开

这是我的贡献。Haml+CoffeeScript+SCSS

Haml

=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'

脚本编写

  $('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）以在占位符打开时保持灰色，但我并不关心这一点。

小开

试试这个改变：

$("select").css("color", "#757575");$(document).on("change", "select", function(){if ($(this).val() != "") {$(this).css("color", "");}else {$(this).css("color", "#757575");}});

小开

不需要任何JavaScript或CSS，只需三个属性：

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

显然，您可以将函数和至少选择的CSS分离到单独的文件中。

备注： onload函数纠正刷新bug。

小开

在这里我修改了大卫的回答（接受的答案）。在他的答案中，他在option标签上放置了禁用和选定的属性，但是当我们还放置隐藏标签时，它会看起来更好。

通过在option标签上添加一个额外的隐藏属性，它将防止在选择“Durr”选项后重新选择“选择您的选项”选项。

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

小开

选择元素的输入`[type="text"]`样式占位符

以下解决方案模拟占位符，因为它与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>

小开

我不满足于超文本标记语言/仅限CSS的解决方案，所以我决定使用JavaScript创建一个自定义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.jsvar 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"}, "&#9660;", 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]);

进一步检查：JSFiddle，<罢工>G it Hub（重命名）。

更新时间：我再次重写了这个。而不是使用列表，我们可以只使用选择。这样即使没有JavaScript也可以工作（如果它被禁用）。

输入：

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

JSFiddle github

小开

如果你正在使用Angular，就像这样：

<select><option [ngValue]="undefined"  disabled selected>Select your option</option><option [ngValue]="hurr">Durr</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>

小开

我喜欢公认的解决方案，它在没有JavaScript的情况下工作得很好。

我只是想补充一下我是如何为可控选择反应组件采用这个答案的，因为我花了几次时间才弄清楚。合并react-select并完成它真的很简单，但是除非你需要这个存储库提供的惊人功能，我不需要在有问题的项目中提供这些功能，否则不需要向我的包添加更多的千字节。注意，react-select通过一个由各种inputs和html元素组成的复杂系统处理selects中的占位符。

在React中，对于受控组件，您不能将selected属性添加到您的选项中。React通过select本身的value属性以及更改处理程序处理选择的状态，其中值应与选项本身中的一个值属性匹配。

比如，比如

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

小开

以下是一个工作示例如何使用纯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 clickdocument.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 clickcombo.removeEventListener("click", setColor);}</script></body></html>

小开

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

/**我的Component.TS*/

constructor(fb: FormBuilder) {this.myForm = this.fb.build({myField: ''});}

/**global.scss*/

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

小开

这个超文本标记语言+CSS解决方案为我工作：

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>

小开

Angular 2的解决方案

在选择的顶部创建一个标签

<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允许您在单击标签时显示选择，该标签在选择选项时隐藏。

角 html css

小开

您需要表单验证，而现代浏览器从头开始提供此功能。

所以你不需要担心用户不能选择该字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。

浏览器内置验证功能检查有效性。

Bootstrap也有一个很好的例子。

超文本标记语言

<form class="needs-validation"><select required><option value="">Please select an option</option><option value="1">Foo</option><option value="2">Bar</option></select><form>

javascript

form = document.getElementByClassName('needs-validation');if(form.checkValidity() === true) {//form validation succeeded} else {//form validation failed}

小开

基于Albireo的回应，此版本不使用jQuery，CSS特异性更好。

const triggerEvent = (el, eventName) => {let event = document.createEvent('HTMLEvents')event.initEvent(eventName, true, false)el.dispatchEvent(event)}
let select = document.querySelector('.placeholder-select')select.addEventListener('change', (e) => {e.target.classList[e.target.value == 0 ? 'add' : 'remove']('empty')})triggerEvent(select, 'change')

.placeholder-select option {color: #000000;}.placeholder-select option:first-child {color: #444444;font-style: italic;font-weight: bold;}.placeholder-select.empty {color: #7F7F7F;}

<select class="placeholder-select"><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>

小开

如果您正在阅读本文并使用React，请使用defaultValue。

<option defaultValue>Select a country here</option>

小开

基于MattW的回答，您可以在做出有效选择后在下拉菜单中显示选择占位符选项，方法是仅在占位符保持选中时有条件地隐藏它（因此选择是：无效）。

select:required:invalid {color: gray;}select:invalid > 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>

小开

由于本主题中提供的答案之间存在不同的样式和功能，下表阐明了提供的每种超文本标记语言、超文本标记语言+CSS和超文本标记语言+CSS+Javascript解决方案的样式和适用的表单逻辑。

由于某种原因，我不得不使用代码格式，因为标记中的桌子是不允许的。
将使用代码片段提供超文本标记语言表以绕过表限制。

我已将这篇文章标记为community wiki，以便任何人都可以详细说明新文章，但请将JQuery，React，Angular，CoffeeScript等添加到备用文章中，以保持此表简单。

         | Technologies |                                                                Styling                                                                |Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |-----------------------------------------------------------------------------------------------------------------------------------------------------------------41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |-----------------------------------------------------------------------------------------------------------------------------------------------------------------8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |-----------------------------------------------------------------------------------------------------------------------------------------------------------------29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |-----------------------------------------------------------------------------------------------------------------------------------------------------------------40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |-----------------------------------------------------------------------------------------------------------------------------------------------------------------50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |

小开

看这个答案：

<select><option style="display: none;" value="" selected>SelectType</option><option value="1">Type 1</option><option value="2">Type 2</option><option value="3">Type 3</option><option value="4">Type 4</option></select>

小开

这对我很有效：

<select class="form-control"><option value="" readonly="true" hidden="true" selected>Select your option</option><option value="1">Something</option><option value="2">Something else</option><option value="3">Another choice</option></select>

小开

您可以将第一个选项的颜色设置为gray，将其显示设置为none，将select的颜色设置为gray，并向其添加input事件侦听器，将其颜色设置为black。

select > option:not(:first-of-type) {color: black;}

<select style='color:gray' oninput='style.color="black"'><option style='display:none'>Choose an option</option><option>1</option><option>2</option><option>3</option></select>

使用customElement API：

class placeholderSelect extends HTMLElement {connectedCallback() {this.innerHTML = `<select style='color:gray' oninput='style.color="black"'><option style='display:none'>${this.getAttribute('data-placeholder')}</option>${this.innerHTML}</select>`;
Array.from(this.children[0].children).forEach(function(el, i) {el.style.color = 'black';});}}
customElements.define('placeholder-select', placeholderSelect);

<placeholder-select data-placeholder='Choose an option'><option>1</option><option>2</option><option>3</option></placeholder-select>

小开

使用类名称包，这是一个与我的React功能组件一起使用的解决方案。我的组件使用钩子，但这对解决方案可能并不重要。这种方法是这里很好地描述的基于类的解决方案的功能重复…https://www.derpturkey.com/select-placeholder-with-react/

组件js…

function NavBar(props, prevProps) {const ClassNames = require("classnames");  // package needs require rather than importconst [where, changeWhere] = useState("");  // my component's value// classnames will add placeholderSelect class if chosen option's value is emptylet whereClass = ClassNames("myOtherStyleRules", {placeholderSelect: !where,});...return (...<div id="where"><selectclassName={whereClass}value={where}...><option value="" hidden> where? </option>    //  value must be empty, hidden from choice<option value="24">Anchorage</option><option value="27">Birmingham</option><option value="28">Detroit</option><option value="25">Los Angeles</option><option value="26">Oahu</option><option value="29">Seattle</option></select>...

组件CSS…

        .placeholderSelect {color: rgb(167, 167, 167);}

小开

selected在页面加载时选择特定选项
disabled确保在表单提交中排除该选项
hidden视觉上隐藏了下拉列表中的选项

    <select><option selected disabled hidden>Choose an Option</option><option>One</option><option>Two</option><option>Three</option></select>

小开

简单的JavaScript解决方案，允许用户仅在未选择任何值时禁用选项来重置字段。

我不喜欢禁用该选项的方式（尽管它确实是一个非常简单的解决方案）。但是我需要重置选择框。所以我在下面创建了那个简单的JavaScript解决方案。

您在超文本标记语言代码中所要做的一切如下：

<select name="animal"><option class="placeholder">Animal</option><option value="1">Mouse</option><option value="2">Cat</option></select>

要使其工作，只需在超文本标记语言主体末尾的script块中包含以下代码。

(function () {const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');
function selectBoxChange(event) {const select = event.srcElement;const placeholderOption = event.srcElement.querySelector('option.placeholder');if (!placeholderOption)return;
if (!select.value || select.value === '') {placeholderOption.disabled = true;placeholderOption.textContent = placeholderOption.dataset['placeholderText'];} else {placeholderOption.disabled = false;placeholderOption.textContent = '';}}
for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {const option = selectboxPlaceholderOptions[i];const select = option.parentElement;
option.value = '';option.disabled = true;option.dataset['placeholderText'] = option.textContent;select.addEventListener("change", selectBoxChange);}})();

将类placeholder分配给占位符选项后，一切都完成了。JavaScript适用于每个可用的选择框，直到页面加载结束。

小开

好的，在我的情况下，有一个技巧，特征（与公认的答案相反）：

灰色如果它是占位符
不需要选择
能够变回灰色（value=""）
没有外部库（jQuery等）

如果值为""，则需要一个小JS函数将其更改为灰色/黑色。JS在注释中解释…没有注释只有几行代码。通过将它推入一个函数，它将适用于这个类的所有复选框…

function checkSelectboxes(){// select all checkboxes, here i choose to do so based on classnamelet selectboxes = document.querySelectorAll('.form-select');// loop through all checkboxes (only one this time)selectboxes.forEach(sb=>{//add eventlistener to each checkboxsb.addEventListener('change',function(e){// if the value of this checkbox isnt "" Then add class, otherwise : remove it.e.target.value!=="" ? e.target.classList.add('changed') : e.target.classList.remove('changed');})})}  
//call the functioncheckSelectboxes();

.form-select{color:#ccc;}.form-select.changed{color:#000}
.form-select option{color:#000;}.form-select option:first-of-type{color:#ccc;}

<!-- give the first option an empty value , and set it as selected--><select type="text" class="form-select" ><option value="" selected>-- My placeholder --</option><option>1 lorem --</option><option>2 ipsum --</option><option>3 dolor --</option></select>

小开

超文本标记语言中有一个很酷的属性，你可以用它来创建一个选择属性的占位符在我的情况下，我使用以下代码，您可以根据您的要求更改它

 <select ref={relationship} required className="sellertype"><option value="" disabled selected hidden>Select Your Seller Type</option><option value="1">Importer</option><option value="2">Exporter</option><option value="3">Local Seller</option><option value="4">Local Buyer</option></select>

现在“选择您的卖家类型”将用作占位符

如何为“选择”框制作占位符？

超文本标记语言：

css：

JavaScript：

Haml

脚本编写

SCSS

选择元素的输入[type="text"]样式占位符

Angular 2的解决方案

选择元素的输入`[type="text"]`样式占位符