Фокусы user-agent и outline залепухи.

outline — это свойство CSS. Оно задаёт контур вокруг элемента, не влияя на его размер и позицию. Используется для выделения элементов, часто в целях доступности (например, при фокусе).

Неприятный момент - это использование моим Ю-А outline по умолчанию черным и жирным при :focus-visible статусе элемента.

Второй неприятный момент - outline не входит в border-box, поэтому вокруг элемента должно быть свободное место либо margin.

Пример использования:

button {
  outline: 2px solid blue;
}

Как "убрать" фокусы user-agent'а с outline:

:focus-visible {
        outline: 1px solid #ссс; /* Кастомная обводка */
        outline-offset: 0px;
    }
    

В чем "фокусы"? Час возился с бескорыстным намерением убрать некрасивые бордеры, которые рисует движок браузера автоматом при клике на текстовое поле. Ниче не работает и жирная противная обводка все равно вылезает, как ни крути border свойство. Канешн. Это оказался грёбаный аутлайн при статусе :focus-visible, не хухры-мухры.

Псевдо-элемент ::selection, определяющий цвета выделенного текста.

За компанию.

::selection { 
    background-color: #558; /* Цвет фона выделения */ 
    color: #f0f0f0; /* Цвет текста */ 
}

Вообще, говоря лексикой Тёмы Л. - дефолтный дизайн вебкита хром - просто уёбище. Особенно эл-ты интерфейса, кнопки, поля форм и прочее. Такое впечатление, что это как то дошло до нас из 90-х, без переделки, и пахнет вин95. Сине-белые израильские оттенки. Блевотина короче. Пачему текст нужно выделять синим фоном ? Почему не сереньким или оранжевым в конце то концов? Эстетика death screen какая то сплошная.