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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

这对我来说很好:

<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。正如评论中指出的那样,它过去不适用于许多浏览器。

以下解决方案也适用于Firefox,无需任何JavaScript:

选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>

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

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

这里是:

HTML格式:

<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类,以防再次选择第一个选项:)

HTML中有Cool属性,您可以使用它为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>

现在“选择卖家类型”将作为占位符