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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

这是我的贡献。火腿+咖啡脚本+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');}其他{return$(this).css('color','gray');}});$('select').change();选择选项{颜色:黑色;}<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=“”>国家</option><option value=“231”>美国</option><option value=“1”>安道尔</option>阿富汗</option><option value=“248”>津巴布韦</option></select>

您可以添加更多的CSS(选择选项:firstchild),以在占位符打开时保持其灰色,但我并不在乎这一点。

其他回答

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

指针事件:none允许您在单击标签时显示select,当您选择选项时隐藏该选项。

角度html css

我喜欢这个被接受的解决方案,而且它在没有JavaScript的情况下工作得很好。

我只想补充一下,我是如何对一个受控选择的React组件采用这个答案的,因为我花了几次时间才弄清楚。合并react select并使用它将非常简单,但除非您需要这个存储库提供的惊人功能,而我不需要这个功能,否则就不需要在我的捆绑包中添加更多的KB。注意,react select通过各种输入和html元素的复杂系统处理select中的占位符。

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

例如

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

既然将所选属性添加到其中一个选项中是不正确的,而且实际上会引发错误,那么该怎么办?

只要你想一想,答案很简单。既然我们希望我们的第一个选项被选中、禁用和隐藏,我们需要做三件事:

将隐藏和禁用的属性添加到第一个定义的选项。将第一个选项的值设置为空字符串。将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; }

请尝试以下更改:

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

这对我来说很好:

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

非CSS-无JavaScript/jQuery答案:

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

更新(2021 12月):

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