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

Question

我正在使用占位符进行文本输入,这很好.但我也想为我的选择框使用占位符.当然我可以使用这段代码:

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

但是"选择你的选项"是黑色而不是光线.所以我的解决方案可能是基于CSS的.jQuery也很好.

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

option:first {
    color: #999;
}

编辑:问题是:人们如何在选择框中创建占位符？但它已经得到了回答,欢呼.

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

select {
    color: #999;
}

Answer 1

非CSS怎么样 - 没有javascript/jQuery的答案？

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

Answer 2

只是偶然发现了这个问题,这里有什么适用于FireFox和Chrome(至少)

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

"禁用"选项会停止<option>使用鼠标和键盘进行选择,而只需使用'display:none'允许用户仍然通过键盘箭头进行选择.该'display:none'风格只是使列表框看"好".

注意:value在"占位符"选项上使用空属性允许验证(必需属性)解决具有"占位符"的问题,因此如果选项未更改但需要; 浏览器应提示用户从列表中选择一个选项.

更新(2015年7月):

在以下浏览器中确认此方法:

• 谷歌浏览器 - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7(占位符在下拉列表中可见,但不可选)
• Microsoft Internet Explorer - v.11(占位符在下拉列表中可见但不可选)
• Project Spartan - v.15.10130(占位符在下拉列表中可见,但不可选)

更新(2015年10月):

删除了style="display: none"支持hidden广泛支持的HTML5属性.该hidden元素具有与display: noneSafari,IE(项目Spartan需要检查)类似的特征,其中option在下拉列表中可见,但不可选择.

更新(2016年1月):

当select元素required允许使用:invalidCSS伪类时,它允许您在select元素处于"占位符"状态时设置样式.:invalid因为占位符中的空值而在这里工作option.

一旦设置了值,:invalid伪类就会被删除.:valid如果您愿意,也可以选择使用.

大多数浏览器都支持这种伪类.IE10 +.这适用于自定义样式select元素; 在某些情况下,即(苹果机在Chrome/Safari浏览器),你需要更改的默认外观select对话框,以便某些风格显示出IE background-color,color.您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息.

Chrome中的原生元素外观Mac:

在Chrome中使用更改的边框元素Mac:

Answer 3

对于必填字段,现代浏览器中有一个纯CSS解决方案:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Answer 4

这样的事可能吗？

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/

Answer 5

我刚刚在下面的选项中添加了隐藏属性,它对我来说很好.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>

Answer 6

该解决方案也适用于FireFox:
没有任何JS.

option[default] {
  display: none;
}

<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Answer 7

我遇到了同样的问题,在搜索时遇到了这个问题,在我找到好的解决方案后,我想与你们分享,以防有人可以从中受益.这是: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;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

客户首先选择后不需要灰色,因此JS删除了类place_holder.我希望这可以帮助别人 :)

更新:感谢@ user1096901,作为IE浏览器的解决方案,您可以place_holder再次添加类,以防再次选择第一个选项:)

Answer 8

1. selected使页面加载时选择特定选项
2. disabled确保该选项被排除在表单提交中
3. hidden在视觉上隐藏下拉列表中的选项

    <select>
        <option selected disabled hidden>Choose an Option</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
</select>

Answer 9

不需要任何JS或CSS,只需要3个属性:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

它根本不显示选项,只是将选项的值设置为默认值.

但是,如果你只是不喜欢与其余颜色相同的占位符,你可以像这样内联修复它:

<!DOCTYPE html>
<html>
    <head>
        <title>Placeholder for select tag drop-down menu</title>
    </head>

    <body onload="document.getElementById('mySelect').selectedIndex = 0">
        <select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"     style="color: gray;    width: 150px;">
          <option value="" hidden>Select your beverage</option> <!-- placeholder -->
          <option value="water" style="color:black" >Water</option>
          <option value="milk" style="color:black" >Milk</option>
          <option value="soda" style="color:black" >Soda</option>
        </select>
    </body>
</html>

显然,您可以将函数和至少select的CSS分离为单独的文件.

注意: onload函数可以纠正刷新错误.

Answer 10

在这里我修改了大卫的答案(接受了答案).在他的回答中,他在选项标签上添加了禁用和选择的属性,但是当我们也放置隐藏标签时,它看起来会更好.通过在选项标签上添加额外的隐藏属性,将阻止在选择"Durr"选项后重新选择"选择您的选项"选项.

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

Answer 11

这是我的

select:focus option.holder {
  display: none;
}

<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Answer 12

我看到了正确答案的迹象,但要把它们放在一起,这将是我的解决方案.

select {
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}

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

Answer 13

用户不应在选择选项中看到占位符。我建议使用hidden占位符选项的属性，而您不需要selected此选项的属性。您可以将其放在第一位。

select:not(:valid) {
  color: #999;
}

<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>

Answer 14

HTML 中有 Cool 属性，您可以使用它为选择属性创建占位符在我的例子中，我使用以下代码，您可以根据您的要求更改它

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

现在“选择您的卖家类型”将用作占位符

Answer 15

现在这只能通过 CSS 实现。

:has()每当选择具有空值的选项时，您都可以使用新的选择器激活选择上的占位符样式。

这与文本输入在空时显示占位符的方式相匹配。

<select>
  <option value="">Please choose...</option>
  <option value="a">Option 1</option>
  <option value="b">Option 2</option>
</select>

select {
  color: black;
}

select:has(option[value=""]:checked) {
  color: gray;
}

该选择框将显示Please choose...为灰色，当选择其他两个选项中的任何一个时，该选择框将变为黑色。

此解决方案允许Please choose...重新选择选项以清除选择并将其值设置为""空字符串。

在required选择框中，您可能还希望隐藏列表中的空选项，以便无法重新选择它：

select:required option[value=""] {
  display: none;
}

Answer 16

这个 HTML + CSS 解决方案对我有用：

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}

<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

Answer 17

带选择器的 2023 年解决方案:has：

select:has(option:disabled:checked[hidden]) {
  color: gray;
}

select option {
  color: black;
}

<select>
  <option selected disabled hidden>Choose</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

Answer 18

[type="text"]选择元素的输入样式占位符

以下解决方案模拟与元素相关的占位符input[type="text"]：

$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});

.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Select Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Answer 19

如果您使用的是Angular，请按照以下步骤操作：

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>

Answer 20

这对我很有效：

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

Answer 21

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

Answer 22

我希望 SELECT 在被选中之前呈灰色，因此对于这段 HTML：

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

我添加了这些 CSS 定义：

select { color: grey; }
select:valid { color: black; }

它在 Chrome / Safari 中按预期工作，也许在其他浏览器中也能正常工作，但我还没有检查过。

Answer 23

这是一个运行良好的CSS解决方案。内容添加在包含元素之后（并且相对于容器绝对定位）（通过 :after 伪类）。

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

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

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

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;


  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;


    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }


    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }


  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }
});

so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>

Answer 24

我目前无法让其中任何一个工作，因为对我来说（1）不需要，（2）需要选项返回默认可选。因此，如果您使用 jQuery，这里有一个严厉的选择：

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')) {
    $(this).css('color', '#999');
  }
  else {
    $(this).css('color', '#555');
  }
});

$selects.each(function() {
  $(this).change();
});

option {
    color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Answer 25

我不满足于仅 HTML/CSS 的解决方案，因此我决定select使用 JavaScript 创建自定义解决方案。

\n\n

这是我过去30分钟写的东西，因此还可以进一步改进。

\n\n

您所要做的就是创建一个包含少量数据属性的简单列表。该代码会自动将列表转换为可选择的下拉列表。它还添加了一个隐藏input来保存所选值，因此可以在表单中使用。

\n\n

输入：

\n\n

<ul class="select" data-placeholder="Role" data-name="role">\n  <li data-value="admin">Administrator</li>\n  <li data-value="mod">Moderator</li>\n  <li data-value="user">User</li>\n</ul>\n

\n\n

输出：

\n\n

<div class="ul-select-container">\n    <input type="hidden" name="role" class="hidden">\n    <div class="selected placeholder">\n        <span class="text">Role</span>\n        <span class="icon">\xe2\x96\xbc</span>\n    </div>\n    <ul class="select" data-placeholder="Role" data-name="role">\n        <li class="placeholder">Role</li>\n        <li data-value="admin">Administrator</li>\n        <li data-value="mod">Moderator</li>\n        <li data-value="user">User</li>\n    </ul>\n</div>\n

\n\n

应该作为占位符的项目的文本显示为灰色。占位符是可选择的，以防用户想要恢复他/她的选择。同样使用 CSS，可以克服所有缺点select（例如，无法设置选项样式）。

\n\n

\r\n

\r\n

<ul class="select" data-placeholder="Role" data-name="role">\n  <li data-value="admin">Administrator</li>\n  <li data-value="mod">Moderator</li>\n  <li data-value="user">User</li>\n</ul>\n

\r\n

<div class="ul-select-container">\n    <input type="hidden" name="role" class="hidden">\n    <div class="selected placeholder">\n        <span class="text">Role</span>\n        <span class="icon">\xe2\x96\xbc</span>\n    </div>\n    <ul class="select" data-placeholder="Role" data-name="role">\n        <li class="placeholder">Role</li>\n        <li data-value="admin">Administrator</li>\n        <li data-value="mod">Moderator</li>\n        <li data-value="user">User</li>\n    </ul>\n</div>\n

\r\n

// Helper function to create elements faster/easier\r\n// https://github.com/akinuri/js-lib/blob/master/element.js\r\nvar elem = function(tagName, attributes, children, isHTML) {\r\n  let parent;\r\n  if (typeof tagName == "string") {\r\n    parent = document.createElement(tagName);\r\n  } else if (tagName instanceof HTMLElement) {\r\n    parent = tagName;\r\n  }\r\n  if (attributes) {\r\n    for (let attribute in attributes) {\r\n      parent.setAttribute(attribute, attributes[attribute]);\r\n    }\r\n  }\r\n  var isHTML = isHTML || null;\r\n  if (children || children == 0) {\r\n    elem.append(parent, children, isHTML);\r\n  }\r\n  return parent;\r\n};\r\nelem.append = function(parent, children, isHTML) {\r\n  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {\r\n    if (children instanceof Text || typeof children == "string" || typeof children == "number") {\r\n      parent.value = children;\r\n    } else if (children instanceof Array) {\r\n      children.forEach(function(child) {\r\n        elem.append(parent, child);\r\n      });\r\n    } else if (typeof children == "function") {\r\n      elem.append(parent, children());\r\n    }\r\n  } else {\r\n    if (children instanceof HTMLElement || children instanceof Text) {\r\n      parent.appendChild(children);\r\n    } else if (typeof children == "string" || typeof children == "number") {\r\n      if (isHTML) {\r\n        parent.innerHTML += children;\r\n      } else {\r\n        parent.appendChild(document.createTextNode(children));\r\n      }\r\n    } else if (children instanceof Array) {\r\n      children.forEach(function(child) {\r\n        elem.append(parent, child);\r\n      });\r\n    } else if (typeof children == "function") {\r\n      elem.append(parent, children());\r\n    }\r\n  }\r\n};\r\n\r\n\r\n// Initialize all selects on the page\r\n$("ul.select").each(function() {\r\n  var parent    = this.parentElement;\r\n  var refElem   = this.nextElementSibling;\r\n  var container = elem("div", {"class": "ul-select-container"});\r\n  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});\r\n  var selected  = elem("div", {"class": "selected placeholder"}, [\r\n    elem("span", {"class": "text"}, this.dataset.placeholder),\r\n    elem("span", {"class": "icon"}, "▼", true),\r\n  ]);\r\n  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);\r\n  this.insertBefore(placeholder, this.children[0]);\r\n  container.appendChild(hidden);\r\n  container.appendChild(selected);\r\n  container.appendChild(this);\r\n  parent.insertBefore(container, refElem);\r\n});\r\n\r\n// Update necessary elements with the selected option\r\n$(".ul-select-container ul li").on("click", function() {\r\n  var text     = this.innerText;\r\n  var value    = this.dataset.value || "";\r\n  var selected = this.parentElement.previousElementSibling;\r\n  var hidden   = selected.previousElementSibling;\r\n  hidden.value = selected.dataset.value = value;\r\n  selected.children[0].innerText = text;\r\n  if (this.classList.contains("placeholder")) {\r\n    selected.classList.add("placeholder");\r\n  } else {\r\n    selected.classList.remove("placeholder");\r\n  }\r\n  selected.parentElement.classList.remove("visible");\r\n});\r\n\r\n// Open select dropdown\r\n$(".ul-select-container .selected").on("click", function() {\r\n  if (this.parentElement.classList.contains("visible")) {\r\n    this.parentElement.classList.remove("visible");\r\n  } else {\r\n    this.parentElement.classList.add("visible");\r\n  }\r\n});\r\n\r\n// Close select when focus is lost\r\n$(document).on("click", function(e) {\r\n  var container = $(e.target).closest(".ul-select-container");\r\n  if (container.length == 0) {\r\n    $(".ul-select-container.visible").removeClass("visible");\r\n  }\r\n});

\r\n

\r\n

\r\n

\n\n

\n\n

更新：我已经改进了这一点（使用向上/向下/输入键进行选择），稍微整理了输出，并将其变成了一个对象。电流输出：

\n\n

<div class="li-select-container">\n    <input type="text" readonly="" placeholder="Role" title="Role">\n    <span class="arrow">\xe2\x96\xbc</span>\n    <ul class="select">\n        <li class="placeholder">Role</li>\n        <li data-value="admin">Administrator</li>\n        <li data-value="mod">Moderator</li>\n        <li data-value="user">User</li>\n    </ul>\n</div>\n

\n\n

初始化：

\n\n

new Liselect(document.getElementsByTagName("ul")[0]);\n

\n\n

进一步检查： JSFiddle、GitHub（已更名）。

\n\n\n\n

更新：我又重写了一遍。我们可以不使用列表，而只使用选择。这样，即使没有 JavaScript，它也能工作（如果它被禁用）。

\n\n

输入：

\n\n

<select name="role" data-placeholder="Role" required title="Role">\n    <option value="admin">Administrator</option>\n    <option value="mod">Moderator</option>\n    <option>User</option>\n</select>\n

\n\n

\n\n

new Advancelect(document.getElementsByTagName("select")[0]);\n

\n\n

输出：

\n\n

<div class="advanced-select">\n    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">\n    <span class="arrow">\xe2\x96\xbc</span>\n    <ul>\n        <li class="placeholder">Role</li>\n        <li data-value="admin">Administrator</li>\n        <li data-value="mod">Moderator</li>\n        <li>User</li>\n    </ul>\n</div>\n

\n\n

JSFiddle、GitHub。

\n

Answer 26

我喜欢这个被接受的解决方案，它在没有 JavaScript 的情况下也能很好地工作。

我只想补充一下我如何为受控选择的 React Component采用这个答案，因为我花了几次尝试才弄清楚。合并和使用它非常简单react-select，但除非您需要此存储库提供的令人惊叹的功能（我对相关项目不需要），否则无需向我的包中添加更多千字节。注意，通过各种和元素react-select的复杂系统来处理选择中的占位符。inputshtml

在 React 中，对于受控组件，您无法将selected属性添加到选项中。valueReact 通过自身的属性以及更改处理程序来处理选择的状态select，其中值应与选项本身内的值属性之一相匹配。

比如说，比如

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

selected由于将属性添加到其中一个选项是不正确的，而且实际上会引发错误，那么怎么办呢？

只要你想一想，答案就很简单。由于我们希望第一个option和一样selected，所以我们需要做三件事：disabledhidden

1. hidden将和属性添加disabled到第一个定义的option.
2. 将第一个值设置option为空字符串。
3. 将 的值select也初始化为空字符串。

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

现在，您可以按照上面的指示设置选择的样式（className如果您愿意，也可以通过 a ）。

select:invalid { color: gray; }

Answer 27

您需要表单验证，现代浏览器从头开始提供此功能。

因此您无需担心用户无法选择该字段。因为当他这样做时，浏览器验证会告诉他，这是一个错误的选择。

浏览器内置了验证函数checkValidity()。

Bootstrap也有一个很好的例子。

超文本标记语言

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

JavaScript

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

Answer 28

基于MattW 的回答，您可以在进行有效选择后，通过仅在占位符保持选中状态时有条件地隐藏它（因此选择为：无效），使选择占位符选项在下拉菜单中可见。

select:required:invalid {
  color: gray;
}
select:invalid > option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
    <option value="" disabled selected>Select something...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Answer 29

您可以将第一个选项的颜色gray设置为，将其显示为none，将select颜色设置为gray，并向其添加一个input事件侦听器，将其颜色设置为black。

select > option:not(:first-of-type) {
  color: black;
}

<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    Choose an option
  </option>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</select>

使用customElementAPI：

class placeholderSelect extends HTMLElement {
  connectedCallback() {
    this.outerHTML = `<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    ${this.getAttribute('data-placeholder')}
  </option>
  ${this.innerHTML}
</select>`

    Array.from(this.children).forEach(function(el, i) {
      if (i !== 0) {
        el.style.color = 'black'
      }
    })
  }
}

customElements.define('placeholder-select', placeholderSelect)

<placeholder-select data-placeholder='Choose an option'>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</placeholder-select>