Как убрать обводку кнопки?
После нажатия на нее в ie, она обводится так как на картинке. Как убрать это? В стилях я указал, что обводку делать не надо, на браузер все равно обводит ее.
Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
задан 31 июл 2011 в 4:33
413 4 4 золотых знака 14 14 серебряных знаков 33 33 бронзовых знака
Что именно вы указали? outline: none?
31 июл 2011 в 5:34
border none
31 июл 2011 в 10:28
31 июл 2011 в 10:29
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Существует такой атрибут как outline в css. Он отвечает за ободку вокруг button/input/textarea/.
a.no-outline
Отслеживать
ответ дан 14 дек 2016 в 15:58
160 2 2 серебряных знака 16 16 бронзовых знаков
Это у вас устанавливается фокус на кнопке, чтобы снять его или установить на другой элемент, нужный вам, используйте ниже приведённый JS. На javascript установить и снять фокус будет так:
document.getElementById("focus_del").focus(); document.getElementById("focus_del").blur();
С помощью установки курсора вы можете указывать после каких действий можно нажать например просто энтер, дабы не тянуться пользователю за мышкой.
Как убрать рамку у кнопок?
По умолчанию, браузер добавляет к кнопкам рамку, которая меняет свой стиль при изменении цвета фона кнопки. Вот как выглядит такая кнопка.
Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:
- задать нулевую толщину рамки;
- указать стиль рамки как none или hidden ;
- установить прозрачный цвет рамки.
Толщина рамки
Используем свойство border-width с нулевым значением или универсальное border (пример 1).
Пример 1. Нулевая толщина рамки
Стиль рамки
За стиль рамки отвечает свойство border-style или, опять же, универсальное border . В качестве значения указываем none или hidden (пример 2).
Пример 2. Меняем стиль рамки
Значения none и hidden дают одинаковый результат, но имеют небольшие отличия, которые проявляются только при создании линий в таблицах. Для кнопок эти значения равнозначны.
Прозрачный цвет
В CSS для прозрачного цвета зарезервировано ключевое слово transparent . Так что для рамки пишем свойство border-color или border с этим значением.
Прозрачный цвет рамки удобно задавать в ситуациях, когда рамка меняет свой цвет при наведении на кнопку курсора мыши или при щелчке по кнопке (пример 3).
Пример 3. Цвет рамки
В данном примере сперва задаём параметры рамки, но делаем её прозрачной через transparent . Затем в псевдоклассе :hover устанавливаем желаемый цвет рамки, который будет проявляться при наведении на кнопку.
См. также
- border-bottom-color
- border-color
- border-left-color
- border-right-color
- border-top-color
- Атрибуты
- Граница в CSS
- Кнопки
- Кнопки
- Кнопки в Bootstrap 4
- Создание кнопок
Как убрать обводку у кнопки css
Чтобы у элемента button убрать обводку, достаточно выставить свойство border в none. Чтобы исключить появление обводки у кнопки при нажатии, или при переходе на неё с помощью табуляции с клавиатуры необходимо использовать псевдо-классы:
button, button:active, button:focus border:none; > Как убрать обводку у кнопки css
Чтобы начать разбираться в удалении обводки, нам нужен пример, где обводка не удалена, поэтому нам понадобится
Выведем прямо здесь:
Как видим при клике, наша обводка дала о себе знать.
Далее удалим обводку при клике:
Удаляем обводку с помощью «outline:none;»
Как вы знаете css «3 способа css» — будем использовать способ attribute style внутри тега:
Посмотрим результат использования «outline:none;»
Проверьте — исчезла ли обводка при клике.
Еще вариант. убираем обводку инпута
Как вариант можно использовать вот такую конструкцию:
.example:active, .example:hover, .example:focus
Нажмите по инпуту — проверьте, пропала ли обводка при клике.
Убираем обводку элементов по клику
Несколько вариантов найденных в сети. смайлы
Как убрать браузерную обводку у button, input, textarea, checkbox и прочих элементов верстки появляющуюся в состоянии :focus в различных браузерах: mozilla, google chrome.
border: 0px !important;
box-shadow: 0 0 0 0 rgba(0,123,255,0)!important;
input, textarea,input:active, textarea:active