html5 — react — placeholder для select tag

Согласно Mozilla Dev Network , placeholder не является допустимым атрибутом на входе <select> .

Вместо этого добавьте параметр с пустым value и selected атрибутом, как показано ниже. Атрибут пустого value является обязательным для предотвращения поведения по умолчанию, которое должно использовать содержимое <option> как значение <option> .

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

В современных браузерах добавление required атрибута в элемент <select> не позволит пользователю отправить форму, частью которой является элемент, если выбранная опция имеет пустое значение.

Если вы хотите создать стиль по умолчанию внутри списка (который появляется при нажатии на элемент) , существует ограниченное количество свойств CSS, которые хорошо поддерживаются. color и background-color являются 2 самыми безопасными ставками, другие свойства CSS, вероятно, будут проигнорированы.

В моем варианте лучший способ (в HTML5) пометить параметр по умолчанию — использовать пользовательские атрибуты data-* . 1 Вот как можно настроить стиль по умолчанию:

select option[data-default] {
  color: #888;
}
<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

Однако это будет только стиль элемента внутри раскрывающегося списка, а не значение, отображаемое на входе. Если вы хотите создать стиль с помощью CSS, настройте его непосредственно на элемент <select> . В этом случае вы можете изменить стиль только выбранного элемента в любое время. 2

Если вы хотите сделать немного сложнее для пользователя выбрать элемент по умолчанию, вы можете установить display: none;

CSS на <option> , но помните, что это не помешает пользователям выбирать его (используя, например, клавиши со стрелками / ввод текста), это просто усложняет их выполнение.

1 Этот ответ ранее рекомендовал использовать атрибут по default который является нестандартным и не имеет значения сам по себе.
2 Технически можно стилизовать выделение на основе выбранного значения с помощью JavaScript, но это выходит за рамки этого вопроса.Однако этот ответ охватывает этот метод.

Как создать заполнитель для блока HTML5

Стилизация полей формы HTML, в основном полей определенным образом часто бывает неуправляемым. С этой целью многие веб-сайты заменяют элементы . Однако есть несколько способов сделать заполнитель для поля выбора.

Самый простой способ создать заполнитель для элемента с помощью HTML5:

 

  <голова>
    Название документа
 

  
  <тело>
     
Выберите поле с заполнителем
 
    <выберите имя="напитки" требуется>

Попробуй сам »

Результат

Выберите поле с заполнителем CoffeeTeaMilk

Вот второй способ добавления заполнителя для поля выбора. Во-первых, вам нужно создать выбранные вами элементы с помощью тега

Теперь вы можете видеть, что первая строка похожа на поле-заполнитель. Он будет незаметен, но все же будет виден.

Пример создания заполнителя для поля

. Кроме того, укажите цвет заполнителя, используя свойство цвета CSS.

Когда требуется элемент , когда он находится в состоянии «заполнитель». Здесь работает :invalid из-за пустого значения в опции заполнителя.

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

Пример создания заполнителя для поля