Избавление от контуров в элементах формы HTML, которые отображаются в браузерах?

Question

Есть ли способ сделать это? От браузера к браузеру зависит, какой контур отображается и тому подобное (Safari и его синее свечение, Firefox и его пунктирный контур при нажатии кнопки отправки ...)

CSS предпочтительнее, но JS тоже подойдет.

Answer 1

Контур может быть удален путем сброса свойства outline:

input:focus, button:focus, textarea:focus, select:focus {
    outline: 0;
    background-color: #efefef;
}

Однако вы должны включить другой визуальный индикатор, как я сделал здесь, чтобы указать, что элемент сфокусирован, для доступностипричины.

Answer 2

Я полагаю, вы говорите о свойстве структуры.Чтобы удалить контуры, вы можете сделать это;

element { outline:none; }

Хотя я не рекомендую это по соображениям удобства использования.

Answer 3

Ответ Си Йи Цзяна на решение на уровне кода. На Sitepoint есть также хорошая статья .

Голубое свечение (кольцо фокусировки) в Safari - это пользовательские настройки Mac OS X. Пользователь может настроить, как / когда это появится.

• в Системных настройках> Клавиатура> Сочетания клавиш> Полный доступ к клавиатуре, отметьте «Только текстовые поля и списки»
• в Safari> «Настройки»> «Дополнительно»> «Универсальный доступ», снимите флажок «Нажмите Tab, чтобы выделить каждый элемент на веб-странице»

Answer 4

selector{
outline:none;
}

Answer 5

Если вы измените свойства по умолчанию элементов в CSS, такие как border, background и т. П., Внешний вид этих элементов по умолчанию больше не будет преобладать.

Вы можете установить границы ширины, цвета и стиля, например, для кнопок, входов и наборов полей. Кроме того, фон (цвета и / или изображения) изменят внешний вид по умолчанию.