提问



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


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


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


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


option:first {
    color: #999;
}


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


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


select {
    color:#999;
}

最佳参考


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




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



只是偶然发现了这个问题,这里有什么在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>



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



这样的事可能吗?


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/[68]

其它参考1


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




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



该解决方案也适用于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>



我遇到了同样的问题,在搜索时遇到了这个问题,在我找到好的解决方案之后,我想与你们分享,以防有人可以从中受益。
这里是:
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类,以防再次选择第一个选项:)

其它参考2


这是我的




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>



我看到了正确答案的迹象,但将这一切结合在一起这将是我的解决方案。




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>



不需要任何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函数可以纠正刷新错误。

其它参考3


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




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



JS的另一种可能性:


 $('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 [69]

其它参考4


这是一个非常有效的 CSS 解决方案。在包含元素( via:after pseudo-class )之后添加内容(并相对于容器绝对定位)。它从我定义的占位符属性获取其文本,我使用该指令( attr(占位符))。另一个关键因素是指针事件:无 - 这允许对占位符文本的点击传递给选择。否则,如果用户点击文本,它就不会下降。


我在我的select指令中自己添加 .empty 类,但通常我发现angular为我添加/删除 .ng-empty (我认为它是sb/c I m在我的代码示例中注入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>




  您可以不使用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>

其它参考5


我希望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中可以正常运行,也可能在其他浏览器中运行,但我还没有检查过。

其它参考6


我目前无法使用其中任何一个,因为对我来说,它是(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>



试试这个改变


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

其它参考7


输入[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>



这是一个有占位符供选择的例子


<select name="country" class="form-control" id="Country" placeholder="Country">

其它参考8


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


这是我在过去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>



这是我的贡献.HAML + Coffeescript + SCSS


HAML

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



关于上面的所有解决方案,但由于HTML规范,这个似乎最有效:


<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>


更新:请原谅我这个错误答案,这绝对不是select元素的占位符解决方案,而是打开select元素列表下的分组选项的标题。