html - yet another weibo filter




如何为“选择”框创建占位符? (12)

我正在使用占位符来处理文本输入问题。 但我想为我的选择框使用占位符。 当然,我可以使用这个代码:

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

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

这只会使选项在下拉菜单中变成灰色(所以点击箭头后):

option:first {
    color: #999;
}

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

并且使用这个结果,选定的值总是灰色的(即使在选择一个真实选项后):

select {
    color:#999;
}

您可以在不使用HTML情况下使用HTML来执行此操作。您需要设置默认选择选项disabled=""selected=""并选择tag 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>

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


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

Disabled选项用于停止使用鼠标和键盘选择的<option> ,而使用'display:none'允许用户仍然通过键盘箭头进行选择。 'display:none'风格只是让列表框看起来很不错。

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

更新(2015年7月):

此方法已在下列浏览器中得到确认:

  • Google Chrome - 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: none相似display: none在Safari,IE中display: none (Spartan项目需要检查) option在下拉列表中可见,但不可选。

更新(2016年1月):

required select元素required它允许使用:invalid CSS伪类,它允许您在处于“占位符”状态时对select元素进行样式设置。 :invalid由于占位符option中的空值,此处:invalid

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

大多数浏览器都支持这个伪类。 IE10 +。 这最适合自定义样式的select元素; 在某些情况下(即Chrome / Safari中的Mac),您需要更改select框的默认外观,以便某些样式显示为background-colorcolor 。 你可以在developer.mozilla.org找到一些关于兼容性的例子。

Chrome中的本机元素外观Mac:

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


对于一个必需的领域,现代浏览器中有一个纯粹的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>


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

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


我希望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中按预期工作,也可能在其他浏览器中运行,但我没有检查。


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

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>


我遇到同样的问题,在搜索过程中遇到了这个问题,在找到了我的好解决方案之后,我想与大家分享,以防某些人能从中受益。 这里是: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类:)


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


这是一个精美的CSS解决方案。 内容被添加(并且相对于容器绝对定位)在包含元素之后( 通过:在伪类之后 )。 它从占位符属性中获取我使用指令( attr(placeholder) )定义的位置的文本。 另一个关键因素是指针事件:无 - 这可以让占位符文本上的点击通过选择。 否则,如果用户单击文本,它将不会下降。

我在我的select指令中自己添加.empty类,但通常我会发现角度为我添加/删除.ng-empty (我假设它是b / c我在我的代码示例中注入了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>


这是我的贡献。 HAML +咖啡标+ 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>

您可以添加更多CSS( select option:first-child ),以便在占位符打开时保持灰色,但我并不在意。


这样的事情可能吗?

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/ : http://jsfiddle.net/Zmf6t/





placeholder