1542

我正在使用占位符进行文本输入，效果很好。但是我也想为我的选择框使用一个占位符。当然，我可以使用以下代码：

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

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

这只会使下拉菜单中的选项变为灰色（因此，单击箭头后）：

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

— 汤玛士
source

1

以防万一有人读到这个-我发布了一种针对现代浏览器的更通用的解决方案，其中包含浏览器的内置验证功能。欢迎来到2020年；）

— Jurik

2972

非CSS-没有JavaScript / jQuery答案：

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

展开摘要

— 大卫
source

134

Firefox（10）不会将禁用选项显示为默认选项（占位符）。默认情况下，它显示下一个，在本例中为“ Durr”。

— jarnoan '02

53

我通常同时添加已禁用和已选择。似乎也可以在FF中使用。

— nilskp

11

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

— kolypto 2012年

183

这不是正确答案的原因是（我相信）请求者希望选择为灰色，直到选择了另一个值。该答案使选项在下拉菜单中为灰色；但没有 select元素。

— 比尔

22

选择{选项[已禁用] {显示：无；}

— Dimael Vertigo

821

我偶然发现了这个问题，以下是至少在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-39.0版
Safari-v.8.0.7（占位符在下拉列表中可见，但无法选择）
Microsoft Internet Explorer-v.11（占位符在下拉列表中可见，但不能选择）
Project Spartan-v.15.10130（占位符在下拉列表中可见，但无法选择）

更新（2015年10月）：

我删除了style="display: none"对HTML5属性的支持，hidden该属性具有广泛的支持。该hidden元素具有与display: noneSafari，Internet Explorer（Project Spartan需要检查）中类似的特征，在option下拉列表中该元素可见，但该元素不可选择。

更新（2016年1月）：

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

一旦设置了值，:invalid伪类将被丢弃。:valid如果愿意，也可以选择使用。

大多数浏览器都支持此伪类。Internet Explorer 10及更高版本。这最适合使用自定义样式的select元素。在某些情况下（例如，Chrome / Safari中的Mac），您需要更改select框的默认外观，以便显示某些样式，例如background-color和color。您可以在developer.mozilla.org中找到一些示例以及有关兼容性的更多信息。

Chrome中的本机元素外观Mac：

在Chrome中选择框本机Mac

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

在Chrome中更改了选择框Mac

— 威廉·伊斯特德
source

5

@jaacob在我测试过的浏览器中，“ display：none”样式从列表中隐藏了“请选择”，这会使它看起来更好。

— 威廉·伊斯特

38

重要的是要注意，不能重新选择禁用的选项：如果选择是强制性的，那么可以-但是如果选择是可选的，则不是。

— 罗伯特·马克·布拉姆

2

Explorer11忽略display:none样式。

— T30 2014年

1

@MattW :invalid在我之前解决了这个问题。

— William

3

您也可以添加一条规则，以“重置” color支持浏览器的选项，如该小提琴所示。这将有助于强调该问题option是一个占位符。（编辑：我看到MattW已经在他的回答中涵盖了这一点）

— Shaggy

251

对于必填字段，现代浏览器中有一个纯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>

展开摘要

— 马特·威尔
source

7

太神奇了-最简单的答案是最下面的答案，并且实际上还算完美。谢谢！希望这个答案将升至最高。

— 丹·尼森鲍姆

2

@DanNissenbaum我玩游戏很晚，而且它确实需要required工作，因此如果您希望该字段为可选字段，则没有用。

— MattW

1

顺便说一句，在:required选择不支持在IE8及以下。该:invalid选择不支持在IE9及以下。 quirksmode.org/css/selectors

— Matt Wagner

4

没有针对非必需选择的解决方案？

— user3494047 '16

1

@ user3494047不能使用这种方法- required条件是什么导致:invalid当选择占位符时浏览器应用伪类。[value=""]不能替代它，因为通过用户交互更新的是value 属性，但是CSS语法引用了一个（不存在的）属性。

— MattW

105

像这样：

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/

— 阿尔比雷奥
source

8

这正是我最近所做的。但是我添加了一个keyup处理程序，以便当通过键盘（使用箭头或字母快捷键）选择一个选项时，更改也会发生 jsfiddle.net/Zmf6t/131

— Radu

这使我走上了正确的轨道……但是我将值设置为=“”（引号之间没有任何内容），因此，当单击“提交”按钮时，它仍然无法验证第一个选项，并且浏览器弹出窗口会提示您选择一个选项...谢谢@Albireo

— Craig Wayne

为什么要显式调用更改函数。

— 永远

@Foreever，因为我在select的change事件处理程序中设置了CSS类，因此，如果您在构建控件时未手动引发事件，则不会应用样式（仅当用户手动更改值时才会应用样式）。

— Albireo 2014年

这不适用于JQeury 3.4.1

— geobudex

45

我只是在option下面的类似图中添加了一个隐藏属性。对我来说很好。

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

展开摘要

— Ajithkumar S
source

2

仅作记录，这对我不起作用（Win10上的Chrome）。

— 克里斯·雷

但是您无法取消设置。您最终选择了一个，但是如果您改变主意，则无法重置。

— Thielicious，

是的但是无论如何，用户都必须在表单内部选择其中一个选项。如果不是必填字段，则删除hidden属性。

— Ajithkumar S

35

下面的解决方案也可以在Firefox中运行，无需任何JavaScript：

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>

展开摘要

— 丹尼
source

26

我遇到了同样的问题，在搜索时遇到了这个问题，在找到适合我的解决方案之后，我想与大家分享一下，以防有人可以从中受益。

这里是：

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

JavaScript：

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

在客户做出第一选择之后，就不需要灰色了，因此JavaScript代码删除了class place_holder。

感谢@ user1096901，作为Internet Explorer浏览器的解决方法，如果place_holder再次选择第一个选项，则可以再次添加该类：)

— 拉美三世
source

2

在某些浏览器中，他仍然可以选择display：none选项，因为它没有被隐藏。

— Srneczek 2014年

解决方法是在选择第一个选项的情况下再次添加“ place_holder”类：）

— rramiii 2014年

23

不需要任何JavaScript或CSS，只需三个属性即可：

<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函数可纠正刷新错误。

— 雅各布·施耐德
source

如果隐藏选项是唯一的，则此方法将

— 无效

但是为什么会有一个只有一个选项的下拉菜单？

— Jacob Schneider

我有一个选项卡式弹出窗口，tab3的下拉菜单从tab2接受输入，它显示出来。您的回答很好，这是一个特例，但是我希望默认值显示为第一个选项，而不是空白的下拉列表。看到这里：jsfiddle.net/n66L7sza

— Eridanis

很好，在这种情况下，您可以扫描下拉列表的长度（如果为零），然后删除隐藏的属性

— Jacob Schneider

在MacOS上的Google Chrome 65.0.3325.181上，这似乎无法正常工作，它不会显示隐藏的条目，而是会选择下面的条目。

— 杰米·H

19

用户不应在选择选项中看到占位符。我建议使用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>

展开摘要

— 罗曼·雅科夫（Roman Yakoviv）
source

2

还是select:invalid有效的。

— elquimista

2

我建议您这样做，因为它至少在Chrome中不包含列表中的占位符文本。

— JoeRaid

请注意，如果没有这种样式，则无法正常工作required

— akmalhakimi1991 '19

18

在这里，我修改了大卫的答案（可接受的答案）。关于他的回答，他在option标签上放置了disable和selected属性，但是当我们还隐藏标签时，它将看起来更好。

通过在option标签上添加额外的隐藏属性，可以防止在选择“ Durr”选项后重新选择“ Select your option”选项。

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

展开摘要

— 纳瓦拉杰
source

感谢您的更新，但是答案仍然无法解释为什么它看起来有所不同。例如，此答案可防止在选择“ Durr”选项后重新选择“ Select your option”选项。哪个属性导致此行为？

— bgran

16

这是我的：

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>

展开摘要

— 王威尔
source

您可以添加<option value="" selected disabled>Please select</option>为第一个选项。

— sstauross

它不会使占位符变成浅灰色。

— Chloe

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>

展开摘要

— 用户名
source

8

Durr选择后为灰色。这将强制关闭的选择框始终为灰色。

— Chloe

9

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

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

展开摘要

— 阿伦·库马尔
source

您可以添加hidden属性，以便在打开select。但是，无论如何，我都非常感谢这个答案。

— dcg

5

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

展开摘要

祝好运...

— 阿卡什
source

它似乎在JQuery 3.4.1中

— 不起作用

5

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

— 让·菲利普·埃蒙德
source

4

我喜欢公认的解决方案，并且在没有JavaScript的情况下效果很好。

我只想添加我如何对受控选择的React Component采纳此答案，因为这花了我一些努力才能弄清楚。合并react-select并完成它确实非常简单，但是除非您需要此存储库提供的惊人功能（我不打算为该项目提供），否则无需在软件包中添加更多的千字节。注意，react-select通过对各种复杂的系统处理中选择的占位符inputs和html元件。

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

例如

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

由于这将是不适当的，并且实际上会引发将selected属性添加到选项之一的错误，那么该怎么办？

一旦您考虑，答案很简单。由于我们希望我们的第一个条件option与and selected一样好，因此我们需要做三件事：disabledhidden

将hiddenand disabled属性添加到第一个定义的option。
设置第一个的值 option空字符串。
将的值初始化select为也是一个空字符串。

state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

现在，您可以按照上面的指示（或根据需要通过a className）设置选择的样式。

select:invalid { color: gray; }

— h
source

3

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

展开摘要

— 格兰特·米勒
source

3

我希望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和其他浏览器中按预期工作，但我没有检查。

— fbparis
source

3

这是一个效果很好的CSS解决方案。将内容添加到包含元素之后（并通过绝对位置相对于容器放置）（通过：after伪类）。

它从我在指令使用位置（attr（placeholder））定义的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>

展开摘要

— 传单
source

3

我目前无法使用其中的任何一个，因为对我而言，这是（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>

展开摘要

— 埃里克·G
source

谢谢，这对我来说是最好的，正如您所说的... select元素是必需的。

— Mousa Alfhaily

3

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

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

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

输入：

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

输出：

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

本应为占位符的项目文本显示为灰色。如果用户想要还原他/她的选择，则可以选择占位符。同样使用CSS，select可以克服的所有缺点（例如，无法样式化选项）。

显示代码段

// Helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// Initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// Update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// Open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// Close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});

.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}

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

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

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

展开摘要

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

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

初始化：

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

进一步检查： JSFiddle，~~GitHub~~（重命名）。

更新：我已经再次重写了这个。除了使用列表，我们还可以使用选择。这样即使没有JavaScript也可以正常工作（以防被禁用）。

输入：

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

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

输出：

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

JSFiddle，GitHub。

— 秋千
source

2

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

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

浏览器内置的验证功能checkValidity（）。

Bootstrap也有一个很好的例子。

的HTML

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

Java脚本

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

— 朱里克
source

1

您可以不Javascript使用仅使用的方法来执行此操作。HTML您需要设置默认的选择选项 disabled=""，selected=""并选择标签required="".浏览器不允许用户在不选择任何选项的情况下提交表单。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

— 图西塔·威克拉玛辛格
source

这会导致整个选择元素变灰，直到选择了一个选项为止，从而导致了潜在的不良行为。

— wickedchild '17

1

在Angular中，我们可以添加一个选项作为占位符，该选项可以隐藏在选项下拉列表中。我们甚至可以添加自定义下拉菜单图标作为背景，以替换浏览器下拉菜单图标。

该诀窍是让占位符只有在CSS 没有选择价值

/ **我的组件模板* /

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/ **我的Component.TS * /

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

— Mukundhan
source

1

Angular 2解决方案

在选择的顶部创建标签

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

并应用CSS将其放在顶部

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none 允许您在单击标签时显示选择，在选择选项时该标签将隐藏。

角度的 html 的CSS

— 教育
source

1

这是我的贡献。Haml + CoffeeScript + SCSS

哈姆

=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'

CoffeeScript

  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()

SCSS

select option {
  color: black;
}

可以通过更改服务器代码并仅根据属性的当前值设置类样式来仅使用CSS，但是这种方式看起来更简单，更简洁。

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();

    select option {
      color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

展开摘要

您可以添加更多CSS（select option:first-child），以在占位符打开时使其保持灰色，但我对此并不在乎。

— 克洛伊
source

1

尝试以下更改：

$("select").css("color", "#757575");
$(document).on("change", "select", function(){
    if ($(this).val() != "") {
        $(this).css("color", "");
    } 
    else {
        $(this).css("color", "#757575");
    }
});

— 乔丹·利帕纳（Jordan Lipana）
source

1

这是一个有效的示例，说明如何使用纯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>

— 乔纳塔纳
source

0

根据Albireo的响应，此版本不使用jQuery，并且CSS特异性更好。

const triggerEvent = (el, eventName) => {
  let event = document.createEvent('HTMLEvents')
  event.initEvent(eventName, true, false)
  el.dispatchEvent(event)
}

let select = document.querySelector('.placeholder-select')
select.addEventListener('change', (e) => {
  e.target.classList[e.target.value == 0 ? 'add' : 'remove']('empty')
})
triggerEvent(select, 'change')

.placeholder-select option {
  color: #000000;
}
.placeholder-select option:first-child {
  color: #444444;
  font-style: italic;
  font-weight: bold;
}
.placeholder-select.empty {
  color: #7F7F7F;
}

<select class="placeholder-select">
  <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>

展开摘要

— 保利先生
source

0

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

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

— 辛格
source

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

HTML：

CSS：

JavaScript：

此HTML + CSS解决方案为我工作：

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

Angular 2解决方案

哈姆

CoffeeScript

SCSS

此`HTML + CSS`解决方案为我工作：

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