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

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

Как насчет не CSS - нет ответа javascript / jQuery?

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

Answer 2

Просто наткнулся на этот вопрос, вот что работает в 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 в опции «placeholder» позволяет валидации (обязательному атрибуту) обойти наличие «placeholder», так что если опция не изменена, но обязательна;браузер должен предложить пользователю выбрать опцию из списка.

Обновление (июль 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, IE, (Project Spartan нуждается в проверке), где option отображается в раскрывающемся списке, но его нельзя выбрать.

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

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

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

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

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

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

Answer 3

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

Answer 4

Может быть, что-то подобное?

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/

Answer 5

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

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

Answer 6

Это решение работает в 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>

Answer 7

У меня была такая же проблема, и во время поиска натолкнулся на этот вопрос, и после того, как я нашел для себя хорошее решение, я хотел бы поделиться им с вами, ребята, на случай, если кто-то может извлечь из этого пользу. вот: 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 в случае, если снова будет выбран первый вариант:)

Answer 8

Нет необходимости в 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>

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

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

Answer 9

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

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

Answer 10

вот мой

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>