Атрибут disabled тега <select> — заблокований список

<select disabled>
    <option>вимкнений список</option>
    <option>не відкриється</option>
</select>
<select>
    <option>робочий список</option>
    <option>відкривається</option>
</select>

HTML

<p>Приклад покоазує як працює атрибут disabled</p>
<hr>
<div>
 
<p>З використанням disabled</p>
  
<select multiple="multiple" name="type" disabled>
<option>Ким ви працювали</option>
<option value = "Програміст">Програміст</option>
<option value = "Системний аміністратор">Системний аміністратор</option>
<option value = "Маркетолог">Маркетолог</option>
<option value = "Дизайнер">Дизайнер </option>
</select>
</div>
<div>
 
<p>Без використанням disabled</p>
    
<select multiple="multiple" name="type">
<option >Ким ви працювали</option>
<option value = "Програміст">Програміст</option>
<option value = "Системний аміністратор">Системний аміністратор</option>
<option value = "Маркетолог">Маркетолог</option>
<option value = "дизайнер">Дизайнер </option>
</select>
</div>
</div>

CSS

div{
  padding:10px;
  float:left;
}

select:focus{
  border: 2px solid #ff0000;  
}

HTML

<form>
    <p class="field">
        <label for="s1">Звичайний список</label>
        <select id="s1">
            <option>Київ</option>
            <option>Львів</option>
        </select>
    </p>

    <p class="field">
        <label for="s2">Вимкнений цілком</label>
        <select id="s2" name="misto" disabled>
            <option>Київ</option>
            <option>Львів</option>
        </select>
        <span class="hint">значення не піде на сервер</span>
    </p>

    <p class="field">
        <label for="s3">Вимкнені пункт і група</label>
        <select id="s3">
            <option value="">Оберіть місто</option>
            <option>Київ</option>
            <option disabled>Львів — тимчасово недоступний</option>
            <optgroup label="Закордон" disabled>
                <option>Варшава</option>
                <option>Краків</option>
            </optgroup>
        </select>
        <span class="hint">розгорніть список: сірі пункти обрати не вийде</span>
    </p>

    <fieldset disabled>
        <legend>
            <label for="s4">Спосіб оплати</label>
            <select id="s4" name="oplata">
                <option>Картка</option>
                <option>Готівка</option>
            </select>
        </legend>
        <p class="field">
            <label for="s5">Валюта</label>
            <select id="s5" name="valuta">
                <option>UAH</option>
                <option>EUR</option>
            </select>
            <span class="hint">вимкнено батьківським fieldset</span>
        </p>
        <p class="note">Список у легенді лишився робочим — і саме він надішлеться.</p>
    </fieldset>
</form>

CSS

.field {
    margin: 0 0 14px;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

select {
    padding: 5px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

select:disabled {
    border-color: #d3d9e2;
    background: #eef1f5;
    color: #8a94a6;
}

optgroup:disabled,
option:disabled {
    color: #a6adba;
}

fieldset {
    margin: 0;
    padding: 10px 12px;
    border: 2px dashed #b9c6d8;
}

fieldset:disabled {
    border-color: #d3d9e2;
}

legend {
    padding: 0 6px;
}

.hint {
    margin-left: 8px;
    color: #5a6472;
    font-size: .9em;
}

.note {
    margin: 6px 0 0;
    color: #1b4f9c;
    font-size: .9em;
}