我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

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

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

您可以在不使用JavaScript和仅使用HTML的情况下执行此操作。您需要将默认的select选项设置为disabled=“”和selected=“”,并选择所需的标记=“”。浏览器不允许用户在未选择选项的情况下提交表单。

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

其他回答

如果使用的是Angular,请执行以下操作:

<选择><option[ngValue]=“undefined”disabled selected>选择您的选项</option><option[ngValue]=“hurr”>Durr</option></选择>

这个HTML+CSS解决方案对我很有用:

表单选择:无效{颜色:灰色;}表单选择选项:第一个子项{颜色:灰色;}表单选择:无效选项:不(:第一个子项){颜色:黑色;}<表单><选择所需><option value=“”>选择行星</选项><option value=“earth”>地球</option>潘多拉</option></选择></form>

我目前无法使用这些选项,因为对我来说(1)不需要,(2)需要返回默认可选选项。因此,如果您使用jQuery,这里有一个很严厉的选项:

var$selects=$('select');$selects.change(函数(){var option=$('选项:默认',this);if(option&&option.is(':selected')){$(this).css('color','#999');}其他{$(this).css('color','#555');}});$selects.each(函数){$(this).change();});期权{颜色:#555;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select name=“in op”><option default selected>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>

非CSS-无JavaScript/jQuery答案:

<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>

更新(2021 12月):

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

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

/**我的组件.TS*/

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

/**全局.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;
    }
  }
}