Как убрать выделение при нажатии на кнопку css

Как убрать рамку у кнопок?

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

Сама рамка устанавливается через универсальное свойство 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
• Кнопки в Bootstrap 5
• Создание кнопок

кнопка html (убрать border/окантовка вокруг при нажатии)

при focus, active и hover и все равно я вижу эту черную рамку вокруг кнопки, есть еще состяния кнопки ? Подскажите как убрать черную окантовку при нажатии при помощи css. как называется это свойство, как изменить его цвет к примеру ?

.clean-label < background-color: white; color: #29abe2; border: none; margin-left: 8px; text-decoration: none; >.clean-label:active < border: none; text-decoration: none; >.clean-label:hover < border: none; text-decoration: none; >.clean-label:focus

кнопка без каймы

Отслеживать

задан 27 ноя 2020 в 9:34

644 1 1 золотой знак 7 7 серебряных знаков 28 28 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Подскажите как убрать черную окантовку при нажатии при помощи css.

outline: none 

.clean-label < border: none; background-color: white; color: #29abe2; margin-left: 8px; text-decoration: none; outline: none; cursor: pointer; >.clean-label:hover

кнопка без каймы

Мышь: отмена выделения, невыделяемые элементы

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.

У кликов мыши есть неприятная особенность.

Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.

Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.

Способ 1: отмена mousedown/selectstart

Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.

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

Текст

Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.

Полный код элемента, который обрабатывает двойной клик без выделения:

 
Двойной клик сюда выведет "Тест", без выделения
 

При установке на родителя – все его потомки станут невыделяемыми:

Выделение, всё же, возможно

Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.

Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.

Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.

Способ 2: снятие выделения постфактум

Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.

Для этого мы используем методы работы с выделением, которые описаны в отдельной главе Выделение: Range, TextRange и Selection. Здесь нам понадобится всего лишь одна функция clearSelection , которая будет снимать выделение.

Пример со снятием выделения при двойном клике на элемент списка:

У этого подхода есть две особенности, на которые стоит обратить внимание:

• Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.
• Выделение при помощи передвижения зажатой мыши всё ещё работает, так что посетитель имеет возможность выделить содержимое элемента.

Способ 3: свойство user-select

Существует нестандартное CSS-свойство user-select , которое делает элемент невыделяемым.

Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.

Это свойство работает (с префиксом) везде, кроме IE9-:

  Строка до.. 
Этот текст нельзя выделить (кроме IE9-) 
 .. Строка после

IE9-: атрибут unselectable=«on»

В IE9- нет user-select , но есть атрибут unselectable.

Он отменяет выделение, но у него есть особенности:

1. Во-первых, невыделяемость не наследуется. То есть, невыделяемость родителя не делает невыделяемыми детей.
2. Во-вторых, текст, в отличие от user-select , всё равно можно выделить, если начать выделение не на самом элементе, а рядом с ним.

 
Этот текст невыделяем в IE, кроме дочерних элементов 

Левая часть текста в IE не выделяется при двойном клике. Правую часть ( em ) можно выделить, т.к. на ней нет атрибута unselectable .

Этот текст невыделяем в IE, кроме дочерних элементов

Итого

Для отмены выделения есть несколько способов:

1. CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
2. Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
3. Отмена действий на mousedown и selectstart :

elem.onmousedown = elem.onselectstart = function() < return false; >;

Какой же способ выбирать?

Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.

Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?

В любом случае эти способы не предназначены для защиты от выделения-и-копирования.

Если уж хочется запретить копирование – можно использовать событие oncopy :

 
Уважаемый копирователь, почему-то автор хочет заставить вас покопаться в исходном коде этой страницы. Если вы знаете JS или HTML, то скопировать текст не составит для вас проблемы, ну а если нет, то увы.
 

Убрать выделение кнопки при нажатии

Как убрать синий border у кнопки при нажатии
Здравствуйте! Сайт сделан на бутстрапе, при клике по кнопке отображается синяя рамка, как ее можно.

При нажатии на кнопку,другие кнопки приближаются к данной кнопки
Привет всем!При нажатии на кнопку,другие кнопки приближаются к кнопке на которую я нажимаю.Так как.

Выделение при нажатии на картинку
<a href=#><img src=1.jpg></a> либо <div onclick=func()>нажми на меня</div> при нажатии на.

Выделение area при нажатии
Доброго времени суток, у меня возникла проблема с тегом area , мне не обходимо , чтобы при нажатие.