Html обводка кнопки при нажатии

bootstrap button shows blue outline when clicked

try to set :active for the button. Additional: Use the Inspector in your browser to find the Problem.

Not sure about buttons but bootstrap adds box-shadow to input fields which can be removed with box-shadow:none;

36 Answers 36

May be your properties are getting overridden. Try attaching !important to your code along with the :active .

Also add box-shadow because otherwise you will still see the shadow around button.

Although this isn’t a good practise to use !important I suggest you use more specific class and then try applying the css with the use of !important.

If you’re using Bootstrap 4, add box-shadow: none (and don’t forgot the prefix -webkit-box-shadow: none ) to this answer. Also note that Bootstrap 4 already has .btn:focus < outline: none >in its btn classes.

Visual cues are critical when not navigating with a mouse. If you remove the outline you must add some other visual feedback, or you will have crippled your site.

There are built-in boostrap class shadow-none for disabling box-shadow (not outline ) (https://getbootstrap.com/docs/4.1/utilities/shadows/). This removes shadow of button:

This IS the solution you’re looking for. This is the solution, move along, move along. Thanks this solved it for Firefox with Bootstrap 4.

In the latest version of Bootstrap, I found removing outline itself doesn’t work. And I have to add this because there is also a box-shadow:

Try Below Code

.button:active, button:active, .button:focus, button:focus, .button:hover, button:hover

This was happening to me in Chrome (though not in Firefox). I’ve found out that the outline property was being set by Bootstrap as outline: 5px auto -webkit-focus-ring-color; . Solved by overriding the outline property later in my custom CSS as follows:

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus

this will solve button with a text, button only a icon or a button is a link:

  Save  Save button, button:active, button:focus, button:hover, .btn, .btn:active, .btn:focus, .btn:hover

if you add border:none !important;

then the button will become smaller size when clicked.

In Bootstrap 4 they use box-shadow: 0 0 0 0px rgba(0,123,255,0); on :focus, so i solved my problem with

a.active.focus, a.active:focus, a.focus, a:active.focus, a:active:focus, a:focus, button.active.focus, button.active:focus, button.focus, button:active.focus, button:active:focus, button:focus, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus

The SCSS way for all elements (not only buttons):

This may help if someone still has this question unresolved.

.btn-clear < background-color: transparent !important; border-style: none !important; cursor: pointer; >.btn-clear:active, .btn-clear:focus

I just had the same issue and the following code worked for me:

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus < outline: none !important; >.btn

You need to use proper nesting and then apply styles to it.

• Right click on button and find the exact class nesting for it using (Inspect element using firebug for firefox), (inspect element for chrome).
• Add style to whole bunch of class. Only then it would work

I found this quite useful in my case after the button click.

I opted to simply remove the border width on :focus . This removes the ugly space between the outline and the button’s rounded corners. For some reason this issue only happens on actual button elements and not elements.

Sometimes didn’t solve the problem and we can try

Here’s my Boostrap 4 solution to remove the button outline

/* * Boostrap 4 * Remove blue outline from button */ .btn:focus, .btn:active

Actually in bootstrap is defined all variables for all cases. In your case you just have to override default variable ‘$input-btn-focus-box-shadow’ from ‘_variables.scss’ file. Like so: $input-btn-focus-box-shadow: none; Note that you need to override that variable in your own custom ‘_yourCusomVarsFile.scss’. And that file should be import in project in first order and then bootstrap like so:

@import "yourCusomVarsFile"; @import "bootstrap/scss/bootstrap"; @import "someOther"; 

The bootstraps vars goes with flag ‘!default’.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default; 

So in your file, you will override default values. Here the illustration:

$input-focus-box-shadow: none; $input-focus-box-shadow: $input-btn-focus-box-shadow !default; 

The very first var have more priority then second one. The same is for the rest states and cases. Hope it will help you.

Here is ‘_variable.scss’ file from repo, where you can find all initials values from bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Even after removing the outline from the button by setting its value to 0, There is still a funny behaviour on the button when clicked, its size shrinks a bit. So i came up with an optimal solution:

How to avoid border focus on click of bootstrap buttons:

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus < box-shadow: none; >.btn.focus, .btn:focus

How to avoid border focus on click of bootstrap input fields:

.form-control.focus, .form-control:focus

If this doesn’t work for your specific case, then I suggest you to open the inspector page, click on the selector tool (small arrow in a box in the top-left corner) click on the element you are trying to edit, then click again on the same element and look at the «Styles» tab to see what changes in terms of CSS. search something related to «focus» and you should be able to detect the code you have to overwrite in your CSS. Hope this is helpful.

Источник

Оформляйте стили наведения, фокуса и активного состояния по-разному

В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

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

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex=»-1″ , но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов
3. При клике на ссылку , фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение color

Вы можете использовать комбинации свойств outline , border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button < background-color: #dedede; >button:hover < background-color: #aaa; >button:focus

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active . Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
2. Удержание кнопки пробела (на кнопках)

Две особенности, которые следует принять к сведению:

1. Удержание пробела вызывает состояние :active у кнопок (), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus . В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на

1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

document.addEventListener('click', event => < if (event.target.matches('button')) < event.target.focus() >>) 

Добавление этого кода изменит поведение нажатия кнопок на следующее:

1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

.element:hover, .element:active < /* Изменить цвет фона/текста */ >.element:focus < /* Показать обводку */ >

1. Когда пользователь наводит на элемент, меняется background-color (и/или color ). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color ). Происходит отклик.

1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

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

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover , :focus и :active по отдельности.

.element:hover < /* Изменить цвет фона/текста */ >.element:active < /* Иные изменения в цвете фона и текста */ >.element:focus < /* Показать обводку */ >

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Источник