Заполнитель для выбранного тега

Ответ 1

РЕДАКТИРОВАТЬ: Это делало/работало в то время, когда я это написал, но, как заметил Блексен, это не в спецификации.

Добавьте такой вариант:

<option default>Select Your Beverage</option>

Правильный способ:

<option selected="selected">Select Your Beverage</option>

Ответ 2

Согласно Сеть Mozilla Dev, 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-*. ¹ Здесь, как стилизовать параметр по умолчанию для greyed:

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>

Ответ 3

<select>

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

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

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

</select>

.country
{


    display:none;
}

</style>

Ответ 4

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

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');

    });

Ответ 5

Да возможно

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

Ответ 6

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

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

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

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

Спасибо.

Ответ 7

Не нужно принимать какой-либо 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;
}

Ответ 8

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

Ответ 9

Попробуйте это

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

Ответ 10

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