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


1543

Я использую заполнители для ввода текста, который работает просто отлично. Но я бы хотел использовать местозаполнитель для моих селекторов. Конечно, я могу просто использовать этот код:

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

Но «Выберите свой вариант» черного цвета вместо светло-серого. Так что моё решение может быть на основе CSS. JQuery тоже хорошо.

Это только делает параметр серым в раскрывающемся списке (поэтому после нажатия стрелки):

option:first {
    color: #999;
}

Вопрос заключается в следующем: как люди создают заполнители в селекторах? Но это уже ответили, ура.

И использование этого приводит к тому, что выбранное значение всегда будет серым (даже после выбора реальной опции):

select {
    color: #999;
}

1
На всякий случай, если кто-то прочитает это - я опубликовал более распространенное решение для современных браузеров со встроенной проверкой браузера. Добро пожаловать в 2020 году;)
Юрик

Ответы:


2975

Без CSS - нет ответа JavaScript / jQuery:

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


134
Firefox (10) не показывает отключенную опцию в качестве выбора по умолчанию (заполнитель). По умолчанию показывается следующий, в данном случае «Durr».
Jarnoan

53
Я обычно добавляю как отключенных, так и выбранных. Кажется, работать в FF тоже.
Nilskp

11
<select> <option value="" disabled selected>Select your option</option> </select>
Колыпто

183
Причина, по которой это не правильный ответ, состоит в том, что (я полагаю), спрашивающий хочет, чтобы выбор был серым, пока не было выбрано другое значение. Этот ответ делает вариант серым в раскрывающемся списке; но не выбранный элемент.
Билл

22
выберите {опция [отключено] {показать: нет; }}
Димаэль Головокружение

823

Я просто наткнулся на этот вопрос, и вот что работает в 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 г.):

Этот метод подтвержден работой в следующих браузерах:

  • 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 г.):

Я удалил style="display: none"в пользу атрибута HTML5, hiddenкоторый имеет широкую поддержку. hiddenЭлемент имеет сходные черты , как display: noneв Safari, Internet Explorer (Project Spartan нуждается в проверке) , где optionвидна в выпадающем списке, но не по выбору.

Обновление (январь 2016 г.):

Когда selectэлемент есть, requiredон позволяет использовать :invalidпсевдокласс CSS, который позволяет стилизовать selectэлемент, когда он находится в состоянии «заполнитель». :invalidработает здесь из-за пустого значения в заполнителе option.

Как только значение будет установлено, :invalidпсевдокласс будет удален . При желании вы также можете использовать, :validесли хотите.

Большинство браузеров поддерживают этот псевдокласс. Internet Explorer 10 и более поздние версии. Это лучше всего работает с selectэлементами в индивидуальном стиле ; в некоторых случаях, т. е. (Mac в Chrome / Safari), вам нужно изменить внешний вид selectокна по умолчанию, чтобы отображались определенные стили, т. е. background-colorи color. Вы можете найти несколько примеров и больше о совместимости на developer.mozilla.org .

Родной элемент внешнего вида Mac в Chrome:

Установите флажок родной Mac в Chrome

Использование измененного элемента границы Mac в Chrome:

Переделано окно выбора Mac в Chrome


5
@jaacob В браузерах, которые я тестировал, стиль «display: none» скрывает «Пожалуйста, выберите» из списка, что делает его более привлекательным.
Уильям Истед

38
Важно отметить, что отключенная опция не может быть повторно выбрана: если выбор является обязательным, это нормально, но не если выбор является необязательным.
Роберт Марк Брэм

2
Explorer11 игнорирует display:noneстиль.
T30

1
Престижность @MattW для разработки :invalidпути, прежде чем я сделал.
Уильям Истед

3
Вы также можете добавить правило для «сброса» colorпараметров в поддерживаемых браузерах, как в этой скрипке . Это помогло бы подтвердить, что инвалид optionявляется заполнителем. (Правка: я вижу, что Мэтт уже рассказал об этом в своем ответе)
Лохматый

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>


7
Удивительно - это был ответ внизу (пока без голосов), который был самым простым и на самом деле работает отлично. Спасибо! Надеюсь, этот ответ поднимется на вершину.
Дан Ниссенбаум

2
@DanNissenbaum Я очень опоздал на игру, плюс она действительно должна requiredработать, поэтому бесполезно, если вы хотите, чтобы поле было необязательным.
MattW

1
Кроме того, :requiredселектор не поддерживается в IE8 и ниже. :invalidСелектор не поддерживается в IE9 и ниже. quirksmode.org/css/selectors
Мэтт Вагнер,

4
Нет решения для необязательного выбора?
user3494047

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/


8
это именно то, что я сделал недавно. но я добавил обработчик keyup, чтобы изменение также происходило при выборе опции с помощью клавиатуры (с помощью стрелок или буквенных сокращений) jsfiddle.net/Zmf6t/131
Radu

это поставило меня на правильный путь ... однако я установил значение = "" (ничего между кавычками), чтобы при нажатии кнопки «Отправить» все равно не удавалось проверить первую опцию, и появлялось всплывающее окно браузера, информирующее вас выбрать вариант ... спасибо @Albireo
Крейг Уэйн

Почему вы вызвали функцию изменения явно.
Навсегда

@Foreever, потому что я установил класс CSS в обработчике событий изменения select, поэтому, если вы не вызовете событие вручную при создании элемента управления, стиль не будет применен (он будет применяться только тогда, когда пользователь вручную изменит значение).
Альбирео

Это не работает на JQeury 3.4.1
geobudex

45

Я только что добавил скрытый атрибут, optionкак показано ниже. Это работает нормально для меня.

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


2
Просто для записи, это не работает для меня (Chrome на Win10).
Крис Рей

Но вы не можете сбросить это. В итоге вы выбираете один, но не можете сбросить настройки, если передумаете.
Thielicious

Да! Но внутри формы в любом случае пользователь должен выбрать любой из этих вариантов. Если поле не является обязательным, удалите скрытый атрибут.
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>


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 удаляет класс place_holder.

Благодаря @ user1096901, в качестве обходного пути для браузера Internet Explorer, вы можете place_holderснова добавить класс в случае, если снова будет выбран первый вариант :)


2
В некоторых браузерах он все еще может выбрать отображение: ни один вариант, потому что он не скрыт.
Срнчек

Обходной путь для этого состоит в том, чтобы снова добавить класс place_holder в случае, если выбран первый вариант :)
rramiii

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>

Очевидно, что вы можете разделить функции и, по крайней мере, CSS выбора в отдельные файлы.

Примечание: функция onload исправляет ошибку обновления.


Это не работает, если скрытый вариант - единственный
Eridanis

но зачем вам выпадающее меню только с одной опцией?
Джейкоб Шнайдер

У меня есть всплывающее окно с вкладками, и раскрывающееся меню из tab3 принимает ввод от tab2, который он отображает. Ваш ответ хороший, и это угловой случай, но я бы ожидал, что значение по умолчанию будет отображаться в качестве первого варианта, вместо этого вы получите пустой выпадающий список. Смотрите здесь: jsfiddle.net/n66L7sza
Эриданис

Это хороший момент, в этом случае вы можете отсканировать длину выпадающего списка, если он равен нулю, а затем удалить скрытый атрибут
Джейкоб Шнайдер,

Похоже, что это неправильно работает в Google Chrome 65.0.3325.181 на MacOS, он не показывает скрытую запись и выбирает ту, которая находится под ней.
Джейми Х

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>


2
или select:invalidтакже действует.
Elquimista

2
Я рекомендую этот, так как в списке нет текста-заполнителя, по крайней мере, в Chrome.
JoeRaid

Обратите внимание, что стиль не работает безrequired
akmalhakimi1991

18

Здесь я изменил ответ Дэвида (принятый ответ). На его ответ он поставил отключенный и выбранный атрибут наoption тег, но когда мы также добавим скрытый тег, он будет выглядеть намного лучше.

Добавление дополнительного скрытого атрибута в optionтег не позволит повторно выбрать опцию «Выберите вашу опцию» после выбора опции «Дурр».

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


Спасибо за обновление, но ответ до сих пор не объясняет, почему он выглядит иначе. Например, этот ответ препятствует повторному выбору параметра «Выбрать вариант» после выбора параметра «Durr» . Какой атрибут вызывает это поведение?
августа

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>


Вы можете просто добавить <option value="" selected disabled>Please select</option>в качестве первого варианта.
sstauross

Это не делает заполнитель светло-серым.
Хлоя

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>


8
Durrв сером цвете после его выбора. Это заставляет закрытое поле выбора всегда быть серым.
Хлоя

9

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

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


Вы можете добавить 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>

Удачи...


Кажется, он не работает в JQuery 3.4.1
geobudex

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


4

Я люблю принятое решение , и оно прекрасно работает без JavaScript.

Я просто хочу добавить, как я принял этот ответ для компонента React с контролируемым выбором , потому что мне потребовалось несколько попыток, чтобы понять это. Было бы очень просто включить 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была selectedтакой же, как disabledи hidden, нам нужно сделать три вещи:

  1. Добавьте атрибут hiddenand disabledк первому определенному option.
  2. Установите значение первого, optionчтобы быть пустой строкой.
  3. Инициализируйте значение 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>

Теперь вы можете стилизовать выборку, как указано выше (или через, classNameесли хотите).

select:invalid { color: gray; }

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>


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 и, возможно, также в других браузерах, но я не проверял.


3

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

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

Я сам добавляю класс .empty в свою директиву select, но обычно я нахожу, что angular добавляет / удаляет .ng-empty для меня (я предполагаю, что это потому, что я внедряю версию 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>


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>


Спасибо, это было лучшим для меня, как вы сказали ... требуется элемент select.
Муса Альфхейли

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можно преодолеть все недостатки (например, невозможность стилизации параметров).


Обновление : я улучшил это (выбор, используя клавиши вверх / вниз / ввод), немного убрал вывод и превратил это в объект. Токовый выход:

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


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>

Javascript

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

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>

Это приводит к тому, что весь элемент select будет недоступен до тех пор, пока не будет выбран параметр, что приведет к потенциально нежелательному поведению.
wickedchild

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>

/ ** Мой Компонент.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;
    }
  }
}

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 позволяет отображать выбор при нажатии на метку, которая скрывается при выборе опции.


1

Вот мой вклад. 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>

Вы можете добавить больше CSS ( select option:first-child), чтобы заполнитель оставался серым, когда он открывается, но мне было все равно.


1

Попробуйте это для разнообразия:

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

1

Вот рабочий пример того, как этого добиться с помощью чистого 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>

1

Опираясь на ответ 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>


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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.