Html 否|灰色|无效|黑色|是|不可见| N/A | N/A |选择：有效{可见}黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 44406771 |是|否|灰色|无效|灰色|否|可见|否|灰色|否|黑色|选择：无效{灰色}| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 40603035 |是|否|黑色|有效|黑色|否|不可见| N/A | N/A |否|黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 22994211 |是|否|灰色|有效|黑色|否|看不见| N/A | N/A |否|黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 2172343 |是|否|灰色|有效|灰色|否|看不见| N/A | N/A |否|黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 48960650 |是|是|灰色|无效|黑色|否|不可见|不适用|不适用|不适用|黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 5805194 |是|是|灰色|有效|黑色|否|可见|是|黑色|否|黑色|否| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 50840409 |是|是|灰色|有效|黑色|是|可见|是|灰色|否|黑色|否|

请参见以下答案：

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

选择类型
类型1
类型2
类型3
类型4

这对我来说很有效：

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

选择您的选项
某物
别的
另一种选择

您可以将第一个选项的颜色设置为

灰色

，将其显示设置为

无

，将

选择

的颜色设置为

灰色

，并向其添加一个

输入

事件侦听器，将其颜色设置为

黑色

select>选项：非（：类型的第一个）{
颜色：黑色；
}

选择一个选项
1.
2.
3.

这正是我最近所做的。但我添加了一个keyup处理程序，这样当通过键盘（使用箭头或字母快捷键）选择某个选项时，也会发生更改，这让我走上了正确的轨道。。。但是，我将值设置为“”（引号之间没有任何内容），这样当单击“提交”按钮时，它仍然无法验证第一个选项，并且会出现一个浏览器弹出窗口，通知您选择一个选项。。。谢谢@AlbireoWhy您显式调用了change函数。@永远是因为我在select的change事件处理程序中设置了CSS类，所以如果在生成控件时不手动引发事件，则不会应用样式（仅当用户手动更改值时才会应用样式）。Firefox（10）不将禁用的选项显示为默认选择（占位符）。它默认显示下一个，在本例中为“Durr”。我通常添加禁用和选中。似乎在FF中也起作用。

选择您的选项

这不是正确答案的原因是（我相信）询问者希望选择为灰色，直到选择了另一个值。此答案使下拉列表中的选项变为灰色；但不是select元素。select{option[disabled]{display:none；}}}@jaacob在我测试过的浏览器中，“display:none”样式从列表中隐藏了“Please choose”，这只会使它看起来更漂亮。需要注意的是，禁用的选项不能重新选择：如果select是强制的，这是可以的-但如果选择是可选的，则不可以。Explorer 11忽略显示：无样式。您还可以添加一条规则来“重置”支持浏览器中选项的颜色，如中所示。这将有助于强化取消的

选项

是一个占位符。（编辑：我看到MattW在他的回答中已经提到了这一点）我唯一的问题是，在选择选项之前，选项列表也是灰色的。在某些浏览器中，他仍然可以选择显示：无选项，因为它没有隐藏。解决方法是添加“place_holder”如果选择了第一个选项，则再次初始化：）作为旁白，IE8及以下版本不支持

：required

选择器。

：无效的

选择器在IE9及以下版本中不受支持。对于非必需的select？@user3494047，没有解决方案-选择占位符时，

必需的

条件导致浏览器应用

：无效的

伪类

[value=”“]

无法替换，因为用户交互更新的是value属性，但CSS语法引用了一个（不存在的）属性。您可以添加

请选择
作为第一个选项。它不会使占位符变为浅灰色。仅用于记录，这对我不起作用（Win10上的Chrome）.但是你不能取消它。你最终选择了一个，但如果你改变主意，你无法重置。是的！但是
$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

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

.place_holder {
    color: gray;
}
option {
    color: #000000;
}

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

<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>
  <option value="" disabled selected>Select your option</option>
  <option value="hurr">Durr</option>
</select>

select { color: grey; }
select:valid { color: black; }

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

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

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

select:invalid { color: gray; }

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

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

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

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

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

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

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

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