Как убрать обводку у кнопки css
Чтобы у элемента button убрать обводку, достаточно выставить свойство border в none. Чтобы исключить появление обводки у кнопки при нажатии, или при переходе на неё с помощью табуляции с клавиатуры необходимо использовать псевдо-классы:
button, button:active, button:focus border:none; > Как убрать рамку вокруг button, input и некоторых других элементов в Firefox? [дубликат]
Данная проблема может возникнуть и на input’ах. При этом, блоки могут иметь еще и лишний отступ. Поэтому надежнее будет написать так:
// Remove border and padding in Firefox ::-moz-focus-outer, ::-moz-focus-inner
Отслеживать
ответ дан 4 янв 2017 в 8:29
MobiDevices MobiDevices
7,289 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак
А padding зачем?
4 янв 2017 в 8:31
@Yuri я все расписал.
4 янв 2017 в 8:31
- css
- firefox
-
Важное на Мете
Связанные
Похожие
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как убрать рамку у кнопок?
По умолчанию, браузер добавляет к кнопкам рамку, которая меняет свой стиль при изменении цвета фона кнопки. Вот как выглядит такая кнопка.
Сама рамка устанавливается через универсальное свойство 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
- Создание кнопок
mih777777 / style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| button , |
| button : active , |
| button : focus |
| outline : none; |
| > |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Footer
© 2024 GitHub, Inc.
You can’t perform that action at this time.