заполнитель для тега select [дубликат]

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

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

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

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

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

в моем варианте лучший способ (в HTML5) отметить параметр по умолчанию - использовать пользовательский data-* атрибуты.¹ вот как стилизовать параметр по умолчанию, который будет выделен серым цветом:

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> элемент напрямую. В этом случае вы можете в любое время изменить только стиль выбранного элемента.²

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

---

_{¹ этот ответ ранее советовал использовать default атрибут, который является нестандартным и не имеет никакого значения сам по себе.
² это технически возможно стилизовать сам select на основе выбранного значения с помощью JavaScript, но это выходит за рамки этого вопроса. ответ, однако, охватывает этот метод.}

<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>

.country
{


    display:none;
}

</style>

Да, это возможно

вы можете сделать это, используя только 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>

Это моя функция для выбора заполнителя коробки.

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

jQuery

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };

      selectPlaceholder('#country');

    });

есть плагин Select2, позволяющий установить много интересных вещей вместе с заполнителем. Это замена jQuery для выбранных полей. Вот официальный сайт https://select2.github.io/examples.html

дело в том - если вы хотите отключить опцию поиска фантазии, пожалуйста, используйте следующий набор опций.

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

особенно мне нравится опция allowClear.

спасибо.

нет необходимости принимать любой javscript или любой метод, который вы можете просто сделать это с помощью html css

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}

     <select>
         <option value="" disabled selected style="display: none;"> placeholder</option>
         <option value="op1">op1</option>
         <option value="op2">op2</option>
         <option value="op3">op3</option>
         <option value="op4">op4</option>
     </select>

попробуй такое

HTML

<select class="form-control"name="country">
<option class="servce_pro_disabled">Select Country</option>
<option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option>
</select>

CSS

.form-control option:first-child {
    display: none;
}

<select>
   <option disabled selected>select your beverage</option>
   <option >Tea</option>
   <option>coffee</option>
   <option>soda</option>
</select>