Как создать плейсхолдер для выпадающего списка (select)?

Ответ на вопрос с использованием чистого HTML, без CSS и JavaScript/jQuery:

<label>Имя опции
    <select>
        <option value="" disabled selected>Выберите вашу опцию</option>
        <option value="hurr">Дурр</option>
    </select>
</label>

Обновление (декабрь 2021):

Этот код работает в последних версиях Firefox, Chrome и Safari. Ранее он не поддерживался многими браузерами, как указано в комментариях.

Да, для обязательного поля можно использовать чистое CSS-решение в современных браузерах. Вот пример, который демонстрирует, как это сделать:

select:required:invalid {
  color: gray; /* Цвет для невыбранного значения */
}
option[value=""][disabled] {
  display: none; /* Скрываем выбранное по умолчанию значение */
}
option {
  color: black; /* Цвет для остальных опций */
}

<select required>
  <option value="" disabled selected>Выберите что-нибудь...</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
</select>

В приведенном примере использование селектора select:required:invalid изменяет цвет выпадающего списка, когда поле не заполнено. Кроме того, опция с пустым значением скрывается, что предотвращает возможность ее выбора после того, как пользователь начнет взаимодействовать с элементом. Это позволяет улучшить пользовательский интерфейс и упростить процесс выбора.

Вот пример того, как можно реализовать селектор с изменением цвета текста в зависимости от выбранного значения:

HTML:

<select id="choice">
    <option value="0" selected="selected">Выберите...</option>
    <option value="1">Что-то</option>
    <option value="2">Что-то еще</option>
    <option value="3">Еще один вариант</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();

Этот код создает выпадающий список. По умолчанию текст выбранного значения будет серым, если пользователь не выбрал другой вариант. В случае выбора другого значения цвет текста станет черным. Вы можете протестировать данный пример по следующей ссылке: Рабочий пример.

Ваш код выглядит правильно. Использование атрибута hidden в option позволяет скрыть этот элемент из списка выбора. Таким образом, вы правильно сделали, добавив элемент <option hidden>Sex</option>, который будет недоступен для выбора пользователем.

Вот ваш код еще раз:

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

Когда вы используете hidden, этот элемент не будет отображаться в выпадающем списке, что может быть полезно для задания заголовка или подсказки. Если это соответствует вашим требованиям, то решение вполне рабочее. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать!

Решение ниже работает без использования JavaScript:

option[default] {
  display: none;
}

<select>
  <option value="" default selected>Выберите ваш возраст</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

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