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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

我希望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和其他浏览器中都能正常工作,但我还没有检查。

其他回答

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

这对我来说很好:

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

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

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

我看到了正确答案的迹象,但要将所有答案结合起来,这将是我的解决方案:

选择{颜色:灰色;}期权{颜色:黑色;}选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>

为选择元素输入[type=“text”]样式占位符

以下解决方案模拟占位符,因为它与input[type=“text”]元素相关:

$('.example').change(函数(){$(this).css('color',$(this).val()=='?'#999' : '#555');});.示例{颜色:#999;}.example>选项{颜色:#555;}.example>选项[value=“”]{颜色:#999;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>