Как убрать обводку при клике на input
Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.
Универсальное решение, которое убирает подсветку во всех браузерах и не только на input , но и на других элементах, в том числе select , button , a :
/* Remove outline on the forms and links */ :active, :hover, :focus
Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap
У меня была такая проблема. Я просто сделал так:
Примените свойство outline:none
Для получения симпатичного белого поля для ввода используйте свойства border и outline . Дополнительно рекомендую border-radius
Конкретно для input и конкретно при фокусе на нем:
Если используете Bootstrap, то, возможно, используется box-shadow .
Попробуйте поставить box-shadow: none;
Допишите также onFocus=»this.blur()»
А отдельным javascript’ом нельзя? Можно подключить скрипт и навесить события на нужные input’ы. А под каким браузером мешает обводка?
Да скрипт помог справиться с файрфоксом и ие8, только теперь в ие6-7 обводка появляется вокруг тега label, а как ее убрать
Все, что могу предложить — перебрасывать фокус на какой-нибудь другой элемент. Примерно так (используя jQuery): $(‘checkbox, label’).focusin(function());
Физически обводку убрать никак нельзя, браузер сам ее рисует. Фактически ее можно свернуть в точку, если у элемента A будет стиль не display:block , а display:inline . При этом на активную область это не повлияет, но это плохой вариант.
Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.
Remove border from buttons
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images. Does anyone know how to remove this gray border from the button, so it’s just the image itself? Thank you.
@Brut: I might be wrong, but that looks browser-specific to me, and I’m pretty sure Jameson wants something that’ll work for all modern browsers.
13 Answers 13
padding: 0; border: none; background: none; I appreciate.. but i added just like you said to the stylesheet and it didn’t work unfortunately. Should I just embed it straight into the html, if that would make a difference?
I added a fiddle plus background: none; to the buttons. Take a peak at the fiddle and see if that works for you.
This seems to work for me perfectly.
outline:none; is not recommended for accessibility reasons. If you must remove the focus border, please provide another way for users to see that it has focus. outlinenone.com
Another point of view to the previous comment is that buttons shouldn’t necessarily hold focus. If you click it and an action is performed, then the focus should not remain.
@Octopus If someone is not able to move a mouse pointer to click on a button directly, but instead needs to tab through the form controls to get to the button in question, then they will need some cue to know that they have reached the correct button before activating it.
Note: In general some websites tend to prefer outline visibility for all users to see especially for disabled users. However some websites prefer not to display outlines, it really depends on your website designs and your website audience. For example for an internal admin panel you can do what ever you like as you already know who your website users are and admin panels are private websites not public facing.
Also on highly graphical web pages sometimes items look better without outlines, like those story book websites out there, Im an sure we have all seen them similar to computer game designs.
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
you are using the CSS cascade to override the property with a inline style. You should check out some articles on the CSS cascade and CSS specificity.
You can easily give this style to it:
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element’s border. so when there is no border, outline property doesn’t have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none , then it prevents your button having any color, image and etc.
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 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.