Селектор :default у CSS — типова кнопка й позначений input

HTML

<div class="cols">
    <form class="card">
        <h4>Стан проти розмітки</h4>
        <p><label><input type="checkbox" checked> прапорець з <code>checked</code></label></p>
        <p><label><input type="checkbox"> прапорець без атрибута</label></p>
        <p><label><input type="radio" name="r" checked> перемикач з <code>checked</code></label></p>
        <p><label><input type="radio" name="r"> другий перемикач</label></p>
        <p><label>список:
            <select>
                <option>перший</option>
                <option selected>другий, з <code>selected</code></option>
            </select></label></p>
        <p class="verdict">Зелена рамка — <code>:default</code>, синя —
            <code>:checked</code>. Поклацайте: синя переїде, зелена ні.</p>
    </form>

    <form class="card">
        <h4>Кнопки надсилання</h4>
        <p><button type="submit">перша — типова</button></p>
        <p><button type="submit">друга</button></p>
        <p><input type="submit" value="третя"></p>
        <p><button type="button">а це взагалі не надсилання</button></p>
        <p class="verdict">Зелену рамку має лише перша: саме її браузер натисне,
            якщо натиснути Enter у полі форми.</p>
    </form>
</div>

<h4 class="cap">Не плутати: <code>:default</code> — це не типові значення властивостей</h4>
<div class="card wide">
    <p class="reset-me">Цей абзац успадкував червоний колір від коробки, а
        властивість <code>color</code> йому повернуто ключовим словом
        <code>initial</code> — це і є «типове значення» в сенсі css.</p>
</div>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.card {
    flex: 1 1 280px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.card.wide {
    color: #b23a3a;
}

.card h4 {
    margin: 14px 0 10px;
}

.card p {
    margin: 10px 0;
}

:default {
    outline: 3px solid #3a9a4f;
    outline-offset: 3px;
}

:checked {
    outline: 3px solid #2f6fd0;
    outline-offset: 6px;
}

.reset-me {
    color: initial;
}

.verdict {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    color: #5a6472;
    font-size: .85em;
}

.cap {
    margin: 26px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<form>
    <label><input type="checkbox" checked> позначений у розмітці — обведений</label><br>
    <label><input type="checkbox"> звичайний</label>
</form>

CSS

input:default {
    outline: 3px solid red;
}