Атрибут autofocus тега <select> — фокус на списку одразу

<form>
    <select name="num" autofocus>
        <option value="1">перший</option>
        <option value="2">другий</option>
        <option value="3">третій</option>
    </select>
    <input type="text" placeholder="а фокус не тут">
</form>

HTML

<p class="head">Шість списків, чотири з них із autofocus</p>

<div class="ramka">
    <p class="pole"><label for="s1">1. Перший autofocus у коді — єдиний претендент</label>
        <select id="s1" autofocus>
            <option>Київ</option><option>Львів</option>
        </select></p>

    <p class="pole"><label for="s2">2. Другий autofocus — уже нічого не отримає</label>
        <select id="s2" autofocus>
            <option>Одеса</option><option>Харків</option>
        </select></p>

    <p class="pole"><label for="s3">3. autofocus + disabled — мовчки нічого</label>
        <select id="s3" autofocus disabled>
            <option>Дніпро</option>
        </select></p>

    <p class="pole"><label for="s4">4. autofocus="false" — атрибут усе одно рахується</label>
        <select id="s4" autofocus="false">
            <option>Полтава</option>
        </select></p>

    <fieldset disabled>
        <legend>5. Вимкнена група</legend>
        <p class="pole"><label for="s5">autofocus усередині — мовчки нічого</label>
            <select id="s5" autofocus>
                <option>Суми</option>
            </select></p>
    </fieldset>

    <p class="pole"><label for="s6">6. Звичайний список без атрибута</label>
        <select id="s6">
            <option>Чернівці</option>
        </select></p>
</div>

<p class="note">У цій рамці фокус не наведеться нікуди: рамці задано sandbox, і
   автоматичний фокус у ній заборонено. Клацніть у список або пройдіться Tab —
   рамка фокуса зʼявиться лише там, де елемент здатний його прийняти.</p>

CSS

.head {
    margin: 0 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ramka {
    max-width: 560px;
    padding: 4px 12px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.pole {
    margin: 12px 0 0;
}

label {
    display: block;
    margin-bottom: 4px;
    color: #5a6472;
    font: 600 13px/1.4 system-ui, sans-serif;
}

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

select:focus-visible {
    outline: 3px solid #2f6fd0;
    outline-offset: 2px;
}

fieldset {
    margin: 14px 0 0;
    padding: 0 10px 10px;
    border: 2px dashed #d64545;
    border-radius: 6px;
}

legend {
    padding: 0 6px;
    color: #c0392b;
    font-weight: 700;
}

select[autofocus] {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

select[autofocus]:disabled,
fieldset:disabled select[autofocus] {
    border-color: #d64545;
    background: #fff4f4;
}

.pole:has(select[autofocus])::after,
.pole:has(select:not([autofocus]))::after {
    display: block;
    margin-top: 3px;
    font: 13px/1.5 system-ui, sans-serif;
}

.pole:has(select[autofocus])::after {
    content: "атрибут autofocus є";
    color: #1b5e20;
}

.pole:has(select[autofocus]:disabled)::after,
fieldset:disabled .pole:has(select[autofocus])::after {
    content: "атрибут є, але фокус сюди не піде";
    color: #c0392b;
}

.pole:has(select:not([autofocus]))::after {
    content: "атрибута немає";
    color: #5a6472;
}

.note {
    max-width: 560px;
    margin-top: 14px;
    color: #5a6472;
    font-size: .9em;
}

HTML

<div>
 
<p>Список з можливістю множинного вибору.</p>
  
<select multiple="multiple" name="type">
<option disabled="disabled" selected="selected">Ким ви працювали</option>
<option value = "Програміст">Програміст</option>
<option value = "Системний аміністратор">Системний аміністратор</option>
<option value = "Маркетолог">Маркетолог</option>
<option value = "Маркетолог">Дизайнер </option>
</select>
</div>
<div>
<p>Випадаючий список.</p>
                  
<select name="number" autofocus>
<option disabled="disabled" selected="selected">Скільки років ви програмуєте</option>
<option>1 рік</option>
<option>2 роки</option>
<option>3 роки</option>
<option>4 роки</option>
</select>
</div>

CSS

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

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