Атрибут multiple тега <select> — вибір кількох пунктів

HTML

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

<div class="grid">
    <div>
        <p>Без <code>multiple</code></p>
        <select name="city">
            <option>Київ</option>
            <option>Львів</option>
            <option>Одеса</option>
            <option>Харків</option>
            <option>Дніпро</option>
        </select>
    </div>

    <div>
        <p><code>multiple</code> без <code>size</code></p>
        <select name="cities[]" multiple>
            <option>Київ</option>
            <option>Львів</option>
            <option>Одеса</option>
            <option>Харків</option>
            <option>Дніпро</option>
        </select>
    </div>

    <div>
        <p><code>multiple size="5"</code>, два <code>selected</code></p>
        <select name="cities[]" multiple size="5">
            <option selected>Київ</option>
            <option>Львів</option>
            <option selected>Одеса</option>
            <option>Харків</option>
            <option>Дніпро</option>
        </select>
    </div>

    <div>
        <p>Те саме прапорцями — без Ctrl і без пояснень</p>
        <label><input type="checkbox" name="cities[]" value="Київ" checked> Київ</label>
        <label><input type="checkbox" name="cities[]" value="Львів"> Львів</label>
        <label><input type="checkbox" name="cities[]" value="Одеса" checked> Одеса</label>
        <label><input type="checkbox" name="cities[]" value="Харків"> Харків</label>
        <label><input type="checkbox" name="cities[]" value="Дніпро"> Дніпро</label>
    </div>
</div>

CSS

body {
    font-family: system-ui, sans-serif;
    font-size: 15px;
}

.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.grid > div {
    min-width: 190px;
}

.grid p {
    margin: 0 0 6px;
    font-size: 13px;
    color: #555;
}

label {
    display: block;
    padding: 2px 0;
}