如何为“选择”框创建占位符？

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

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

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

这只会使下拉列表中的选项变灰（因此单击箭头后）：

option:first {
    color: #999;
}

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

使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：

select {
    color: #999;
}

当前回答

我只是在下面的选项中添加了一个隐藏属性。这对我来说很好。

<选择><option hidden>性别</option><option>男性</option><option>女性</option></选择>

2016-06-30 10:42:38

其他回答

类似于：

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/

2011-04-27 13:50:16

这里有一个工作得很好的CSS解决方案。内容被添加（并且相对于容器绝对定位）在包含元素之后（通过：在伪类之后）。

它从我使用指令时定义的占位符属性（attr（占位符））中获取文本。另一个关键因素是指针事件：无-这允许单击占位符文本传递到选择。否则，如果用户单击文本，它不会下降。

我自己在select指令中添加了.empty类，但通常我发现angular为我添加/删除.ng是空的（我认为这是因为我在代码示例中注入了1.2版本的angular）。

（示例还演示了如何在AngularJS中包装HTML元素以创建自己的自定义输入）

2017-06-08 22:12:50

非CSS-无JavaScript/jQuery答案：

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

更新（2021 12月）：

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

2011-05-02 15:45:49

下面是一个工作示例，如何使用纯JavaScript实现这一点，该JavaScript处理第一次单击后的选项颜色：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myselect {
        color: gray;
      }
    </style>
  </head>

  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>

      <option>Item 1
      </option>

      <option>Item 2
      </option>

      <option>Item 3
      </option>
    </select>

    <script>
      // Add event listener to change color in the first click
      document.getElementById("myselect").addEventListener("click", setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // Remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>

2019-01-24 15:11:56

使用类名包，这里有一个与我的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);
        }

2021-06-10 18:16:02

如何为“选择”框创建占位符？

推荐文章

最新文章

标签