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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

好的,在我的案例中,有一个很有用,它的特点(与公认的答案相反):

如果是占位符,则为灰色不需要选择能够变回灰色(值=“”)没有外部库(jquery等)

如果值不是“”,则需要一个小JS函数将其更改为灰色/黑色。注释中解释了JS。。没有注释,只有几行代码。通过将其放在函数中,它将适用于该类的所有复选框。。

函数checkSelectboxes(){//选中所有复选框,这里我根据类名选择这样做let selectboxes=document.querySelectorAll('.form select');//循环浏览所有复选框(这次只有一个)selectboxes.forEach(sb=>{//将eventlistener添加到每个复选框sb.addEventListener('change',函数(e){//如果此复选框的值不是“”,则添加类,否则:删除它。e.target.value=="" ? e.target.classList.add('changed'):e.target.cclassList.remove('changed');})})}//调用函数checkSelectboxes();.表单选择{颜色:#ccc;}.form-select已更改{颜色:#000}.form选择选项{颜色:#000;}.form select选项:第一个类型{颜色:#ccc;}<!-- 给第一个选项一个空值,并将其设置为selected--><select type=“text”class=“form select”><option value=“”selected>--我的占位符--</option><option>1 lorem--</option><option>2ipsum--</option><option>3多尔--</option></选择>

其他回答

非CSS-无JavaScript/jQuery答案:

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

更新(2021 12月):

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

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>

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

基于MattW的回答,您可以在做出有效选择后,通过仅在占位符保持选中时有条件地隐藏它,使选择占位符选项在下拉菜单中可见(因此选择无效)。

select:必需:无效{颜色:灰色;}select:无效>选项[value=“”][禁用]{显示:无;}期权{颜色:黑色;}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>

使用类名包,这里有一个与我的React功能组件一起工作的解决方案。我的组件使用钩子,但这可能对解决方案并不重要。这种方法是基于类的解决方案的一种功能性模仿。。。https://www.derpturkey.com/select-placeholder-with-react/

组件JS。。。

function NavBar(props, prevProps) {
            const ClassNames = require("classnames");  // package needs require rather than import
            const [where, changeWhere] = useState("");  // my component's value
            // classnames will add placeholderSelect class if chosen option's value is empty
            let whereClass = ClassNames("myOtherStyleRules", {
                placeholderSelect: !where,
            });
            ...
            return (
            ...
            <div id="where">
                            <select
                              className={whereClass}
                              value={where}
                              ...
                            >
                              <option value="" hidden> where? </option>    //  value must be empty, hidden from choice
                              <option value="24">Anchorage</option>
                              <option value="27">Birmingham</option>
                              <option value="28">Detroit</option>
                              <option value="25">Los Angeles</option>
                              <option value="26">Oahu</option>
                              <option value="29">Seattle</option>
                            </select>
                ... 

组件CSS。。。

        .placeholderSelect {
          color: rgb(167, 167, 167);
        }

基于Albireo的响应,该版本不使用jQuery,CSS的特异性更好。

const triggerEvent=(el,eventName)=>{let event=document.createEvent('HTMLEvents')event.initEvent(eventName,true,false)el.dispatchEvent(事件)}let select=document.querySelector('.placeholder select')select.addEventListener('change',(e)=>{e.target.classList[e.target.value==0?'add':'remove']('empty')})triggerEvent(选择,“更改”)占位符选择选项{颜色:#000000;}占位符选择选项:第一个子项{颜色:#444444;字体样式:斜体;字号:粗体;}.占位符-选择为空{颜色:#7F7F7F;}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>