Атрибут disabled тега <option> — недоступний пункт

<p>З використанням атрибута disabled</p>
<form>
   <p><select  name="color">
    <option value="t11" disabled="disabled" selected="selected">Виберіть доступний розмір футболки</option>
    <option value="t1" disabled="disabled"  >XS</option>
    <option value="t2" disabled="disabled" >S</option>
    <option value="t3" disabled="disabled" >M</option>
    <option value="t4" disabled="disabled">L</option>
     <option value="t5" disabled="disabled">XL</option>
    <option value="t6" disabled="disabled">XXL</option>
    <option value="t7" disabled="disabled">XXXL</option>
   </select></p>
   <p><input type="submit" value="Надіслати"></p>
  </form>

<br><br>
<p>Без використання атрибута disabled</p>
<form>
   <p><select  name="color">
    <option value="t11" disabled="disabled" selected="selected">Виберіть доступний розмір футболки</option>
    <option value="t1" >XS</option>
    <option value="t2" >S</option>
    <option value="t3">M</option>
    <option value="t4" >L</option>
     <option value="t5" >XL</option>
    <option value="t6" >XXL</option>
    <option value="t7">XXXL</option>
   </select></p>
   <p><input type="submit" value="Надіслати"></p>
  </form>

HTML

<p>Виберіть свій улюблений овоч чи фрукт:</p>
<form>
Фрукти<input type = "radio" id="myButton" name="sex" value="female" ><br><br>
  <select name="donate_type" size="3">
  <option id="m1" value="m1"  disabled>Яблука</option>
  <option id="m2" value="m2"  disabled>Банани</option>
  <option id="m3" value="m3"  disabled>Мандарини</option>
</select>
<br><br>
  <input type="submit" value="Надіслати" id="q1"  disabled>
<br>
<br>
 Овочі <input  type = "radio"  id="Button" name="sex" value="male" ><br><br>
 <select name="donate_type" size="3">
  <option id="a1" value="a1"  disabled>Огірки</option>
  <option id="a2" value="a2"  disabled>Помідори</option>
  <option id="a3" value="a3"  disabled>Перець</option>
</select>
<br><br>
  <input type="submit" value="Надіслати" id="q2"  disabled>
</form>

JS

document.getElementById('myButton').onclick = function () {
  document.getElementById('m1').disabled = false;
  document.getElementById('a1').disabled = true;
  document.getElementById('m2').disabled = false;
  document.getElementById('a2').disabled = true;
  document.getElementById('m3').disabled = false;
  document.getElementById('a3').disabled = true;
  document.getElementById('q1').disabled = false;
  document.getElementById('q2').disabled = true;
};

document.getElementById('Button').onclick = function () {
  document.getElementById('m1').disabled = true;
  document.getElementById('a1').disabled = false;
  document.getElementById('m2').disabled = true;
  document.getElementById('a2').disabled = false;
  document.getElementById('m3').disabled = true;
  document.getElementById('a3').disabled = false;
  document.getElementById('q2').disabled = false;
  document.getElementById('q1').disabled = true;
};
//# sourceURL=pen.js

HTML

<div class="col">
    <p><b>1. Заглушка правильно</b><br>disabled + selected + порожній value</p>
    <select>
        <option value="" disabled selected>Оберіть місто</option>
        <option>Київ</option>
        <option>Львів</option>
        <option>Одеса</option>
        <option>Харків</option>
    </select>
</div>

<div class="col">
    <p><b>2. Забули selected</b><br>браузер став на першому увімкненому пункті, і заглушки не видно</p>
    <select>
        <option value="" disabled>Оберіть місто</option>
        <option>Київ</option>
        <option>Львів</option>
        <option>Одеса</option>
        <option>Харків</option>
    </select>
</div>

<div class="col">
    <p><b>3. Вимкнена ціла група</b><br>optgroup disabled</p>
    <select size="6">
        <optgroup label="Тимчасово недоступні" disabled>
            <option>Самовивіз</option>
            <option>Кур'єр того ж дня</option>
        </optgroup>
        <optgroup label="Доступні">
            <option>Пошта</option>
            <option>Поштомат</option>
        </optgroup>
    </select>
</div>

<div class="col">
    <p><b>4. Те саме зі своїм стилем</b><br>правило option:disabled збігає й пункти групи</p>
    <select size="6" class="marked">
        <option value="" disabled selected>Оберіть спосіб</option>
        <optgroup label="Тимчасово недоступні" disabled>
            <option>Самовивіз</option>
        </optgroup>
        <option>Пошта</option>
        <option>Поштомат</option>
    </select>
</div>

CSS

.col {
    display: inline-block;
    vertical-align: top;
    width: 240px;
    margin: 0 14px 18px 0;
}

.col p {
    margin: 0 0 6px;
    min-height: 3.2em;
    font-size: .9em;
    color: #5a6472;
}

select {
    width: 100%;
    padding: 4px;
    font: 15px/1.5 system-ui, sans-serif;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

option {
    padding: 2px 6px;
}

.marked option:disabled {
    color: #c0392b;
    font-style: italic;
    background: #fdeeee;
}