时间戳

首页 > 解决方案 > 使选择元素中的第一个选项成为可选占位符

javascript - 使选择元素中的第一个选项成为可选占位符

问题描述

我在 HTML 中有一个 select 元素，我想给它一个占位符。我希望这个占位符是可选择的（所以没有选择任何选项）。

Because it is a placeholder I want the option text to be grey, and when the option is selected I want the select element's text to also be grey.

有很多问题可以解决这个问题的一部分，但没有一个提供功能性解决方案（我可以找到）。

以下是预期结果的示例（请参阅 Campus 下拉菜单）。

示例图像。

我在项目中使用 React，并且查看了 React-select 包，但找不到像这样实现它的方法。

标签： javascripthtmlcss

解决方案

您可以使用 CSS 执行此操作，方法是使用选择器将选项颜色设置为灰色，在选择默认值时将选择设置为灰色，并将其他选项设置为特定颜色（因此当select为灰色时它们保持该颜色而不是从它继承灰色）。这是一个例子：

const {useState} = React;

function Example() {
    const [value, setValue] = useState("");
    const onChange = ({currentTarget: {value}}) => {
        setValue(value);
    };
    return <select size="1" className={value ? "" : "greyed"} value={value} onChange={onChange}>
        <option value="">Default</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
    </select>;
}

ReactDOM.render(<Example/>, document.getElementById("root"));
/*
We have this so that when the select is greyed, its options aren't
*/
select option[value] {
    color: black;
}

/*
Grey-out an element with the class, and option elements with blank values
*/
.greyed, select option[value=""] {
    color: grey;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

推荐阅读