Как мне сделать заполнитель для поля выбора?

1757

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

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

Но «Выберите свой вариант» будет черным, а не светло-серым. Так что мое решение могло быть основано на CSS. jQuery тоже в порядке.

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

option:first {
    color: #999;
}

Возникает вопрос: как люди создают заполнители в окнах выбора? Но на него уже ответили, ура.

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

select {
    color: #999;
}
1
  • 5
    На всякий случай, если кто-то это прочитает - я опубликовал более распространенное решение для современных браузеров со встроенной проверкой. Добро пожаловать в 2020 год;)
    Jurik
    22 янв.
3327

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

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
2
  • 151
    Firefox (10) не показывает отключенный параметр в качестве выбора по умолчанию (заполнитель). По умолчанию он показывает следующий, в данном случае "Durr".
    jarnoan
    27 фев '12 в 12:12
  • После того, как пользователь выбрал значение, он не может снова отменить выбор (даже если значение выбора является необязательным)! 30 июл в 1:16
929

Я только что наткнулся на этот вопрос, и вот что работает в 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 - версия 43.0.2357.132
  • Mozilla Firefox - версия 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

0
280

Для обязательного поля в современных браузерах есть решение на чистом 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>
0
107

Что-то вроде этого:

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/

1
  • Это отлично работает, когда значение выбора является необязательным, пользователь может снова отменить выбор. 30 июл в 1:19
53

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

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>
2
  • 2
    изумительный, самый простой! 24 июня в 13:55
  • 1
    После того, как пользователь выбрал значение, он не может снова отменить выбор (даже если значение выбора является необязательным)! 30 июл в 1:21
41 год

Приведенное ниже решение также работает в 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>
1
  • После того, как пользователь выбрал значение, он не может снова отменить выбор (даже если значение выбора является необязательным)! 30 июл в 1:21
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снова добавить класс, если снова будет выбран первый вариант :)

0
24

Нет необходимости в каком-либо 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 исправляет ошибку обновления.

0
22

Пользователь не должен видеть заполнитель в параметрах выбора. Я предлагаю использовать 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>
1
  • После того, как пользователь выбрал значение, он не может снова отменить выбор (даже если значение выбора является необязательным)! 30 июл в 1:23
18

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

Добавление дополнительного скрытого атрибута к optionтегу предотвратит повторный выбор параметра «Выберите свой вариант» после выбора параметра «Durr».

<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>
0
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>
0
11

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

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

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

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

Это решение 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>
0
6

У меня это хорошо работает:

<select class="form-control">
    <option value="" readonly="true" hidden="true" selected>Select your option</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>
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

5

Основываясь на ответе 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>
5

Вы можете установить цвет для первого параметра gray, установить его отображение none, установить selectцвет grayи добавить inputк нему прослушиватель событий, который устанавливает его цвет black.

select > option:not(:first-of-type) {
  color: black;
}
<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    Choose an option
  </option>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</select>

Используя customElementAPI:

class placeholderSelect extends HTMLElement {
  connectedCallback() {
    this.outerHTML = `<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    ${this.getAttribute('data-placeholder')}
  </option>
  ${this.innerHTML}
</select>`

    Array.from(this.children).forEach(function(el, i) {
      if (i !== 0) {
        el.style.color = 'black'
      }
    })
  }
}

customElements.define('placeholder-select', placeholderSelect)
<placeholder-select data-placeholder='Choose an option'>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</placeholder-select>
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. Добавьте hiddenи 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>

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

select:invalid { color: gray; }
4

Вам нужна проверка формы, и современные браузеры предлагают это с нуля.

Таким образом, вам не нужно заботиться о том, чтобы пользователь не мог выбрать поле. Потому что, когда он это сделает, проверка браузера скажет ему, что это неправильный выбор.

В браузер встроена функция проверки 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
}
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>
0
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 .

0
3

Смотрите этот ответ:

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</option>
</select>
3

Из-за разнообразия стилей и функциональности ответов, представленных в этом потоке, в таблице ниже разъясняются стили и применимая логика формы для каждого из предоставленных решений HTML, HTML + CSS и HTML + CSS + Javascript.

Мне пришлось использовать форматирование кода, потому что по какой-то причине таблицы не разрешены в разметке.
Таблица HTML будет предоставлена ​​с использованием фрагмента кода, чтобы обойти ограничение таблицы.

Я пометил этот пост так, community wikiчтобы каждый мог детализировать новые сообщения, хотя, пожалуйста, добавьте JQuery, React, Angular, CoffeeScript и т. Д. В альтернативный пост, чтобы упростить эту таблицу.

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |
3

Вы можете сделать это без использования JavaScript и используя только HTML. Вам необходимо установить опцию select по умолчанию 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>
0
1
 <select>
    <option disabled selected hidden>Please Choose...</option>
    <option>One</option>
    <option>Two</option>
</select>
3
  • Вы должны предоставить контекст, чтобы объяснить, чем ваш ответ отличается от принятого. 16 августа в 9:19
  • он использует только тег select без каких-либо JQuery и CSS. использовать атрибут Отключено, выбрано и скрыто 16 августа в 10:20
  • Дело в том, чтобы помочь тому, кто не знает об этих атрибутах. Обычно в Stack Overflow не принимается ответ, который просто сбрасывает код без объяснений. 17 августа в 8:02
0

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