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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

2023年的解决方案:具有选择器:

选择:已(选项:已禁用:已选中[隐藏]){颜色:灰色;}选择选项{颜色:黑色;}<选择><option selected disabled hidden>选择</option><option>一个</option><option>两个</option><option>三个</option></选择>

其他回答

您可以将第一个选项的颜色设置为灰色,将其显示设置为无,将选择的颜色设置成灰色,并向其添加一个将其颜色设置为黑色的输入事件侦听器。

选择>选项:不(:第一个类型){颜色:黑色;}<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>选择一个选项</选项><选项>1.</选项><选项>2.</选项><选项>3.</选项></选择>

使用customElement API:

class placeholderSelect扩展了HTMLElement{已连接Callback(){this.innerHTML=`<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>${this.getAttribute('data-placeholder')}</选项>${this.innerHTML}</select>`;Array.from(this.children[0].childress).forEach(函数(el,i){el.style.color=“黑色”;});}}customElements.define('占位符选择',占位符选择);<placeholder select data placeholder=“选择选项”><选项>1.</选项><选项>2.</选项><选项>3.</选项></占位符选择>

选择:焦点选项。文件夹{显示:无;}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>

如果您正在阅读并使用React,请使用defaultValue。

<option defaultValue>Select a country here</option>

类似于:

HTML格式:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

工作示例:http://jsfiddle.net/Zmf6t/

纯JavaScript解决方案,允许用户在未选择值时仅通过禁用选项来重置字段。

我不喜欢仅仅禁用该选项的方式(尽管这确实是一个非常简单的解决方案)。但我需要重置选择框。所以我在下面创建了一个简单的JavaScript解决方案。

在HTML代码中,您只需执行以下操作:

<select name="animal">
    <option class="placeholder">Animal</option>
    <option value="1">Mouse</option>
    <option value="2">Cat</option>
</select>

要实现这一点,只需在HTML正文末尾的脚本块中包含以下代码即可。

(function () {
    const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');

    function selectBoxChange(event) {
        const select = event.srcElement;
        const placeholderOption = event.srcElement.querySelector('option.placeholder');
        if (!placeholderOption)
            return;

        if (!select.value || select.value === '') {
            placeholderOption.disabled = true;
            placeholderOption.textContent = placeholderOption.dataset['placeholderText'];
        } else {
            placeholderOption.disabled = false;
            placeholderOption.textContent = '';
        }
    }

    for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {
        const option = selectboxPlaceholderOptions[i];
        const select = option.parentElement;

        option.value = '';
        option.disabled = true;
        option.dataset['placeholderText'] = option.textContent;
        select.addEventListener("change", selectBoxChange);
    }
})();

将类占位符分配给占位符选项后,一切都完成了。JavaScript与页面加载结束前可用的每个选择框一起工作。