Как сделать заполнитель для поля «Выбрать»?

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

Я вижу признаки правильных ответов, но собрать все это вместе было бы моим решением.

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 2

Пользователь не должен видеть заполнитель в опциях выбора.Я предлагаю использовать атрибут 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 3

Если вы используете угловой, идите так

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

Answer 4

Еще одна возможность в 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

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

Удачи ...

Answer 6

Вот решение CSS , которое прекрасно работает. Содержимое добавляется (и абсолютно позиционируется относительно контейнера) после содержащего элемента ( через: после псевдокласса ). Он получает свой текст из атрибута заполнителя, который я определил, где я использовал директиву ( attr (заполнитель) ). Другим ключевым фактором является указатель-события: нет - это позволяет кликам на тексте-заполнителе проходить до выбора. В противном случае он не выпадет, если пользователь щелкнет текст.

Я сам добавляю класс .empty в свою директиву select, но обычно я нахожу, что angular добавляет / удаляет .ng-empty для меня (я предполагаю, что это b / c I ' m вводит версию 1.2 Angular в моем примере кода)

(в примере также показано, как обернуть элементы HTML в angularJS для создания собственных пользовательских вводов)

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 7

В настоящее время я не могу заставить что-либо из этого работать, потому что для меня это (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 8

Ввод [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 9

Решение для 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

Answer 10

В Угловой мы можем добавить параметр в качестве заполнителя, который может быть скрыт в раскрывающемся списке параметров.Мы даже можем добавить пользовательский выпадающий значок в качестве фона, который заменяет выпадающий значок браузера .

трюк предназначен для включения заполнителя 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;
    }
  }
}