I've been noticing that if clicking on a button on my site (as shown in the example below) a gradient border is shown around the button. I've tried several browsers but this only shows in Google Chrome.
Is there a way of removing this CSS wize?
You can disable the outline with outline:none.
input,
select,
textarea,
button {
outline: none;
}
And to stay safe with focus states:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
However, some think it isn't a good idea to disable the outline due to accessibility issues (http://outlinenone.com/)
This is to show that the element is active. To disable this:
#element.focus{
outline:0;
}
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 7 years ago.
Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
*:focus {
outline: none;
}
⚠️ Accessibility warning
Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject
The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)
this remove orange frame in chrome from all and any element no matter what and where is it
*:focus {
outline: none;
}
Solution
*:focus {
outline: 0;
}
PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.
Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
Set
input:focus{
outline: 0 none;
}
"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]
This will definitely work. Orange outline will not show anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus {
outline:none;
}
I found out that you can also use:
input:focus{
border: transparent;
}
I have an issue with my website where when I hold down a button, the button is outlined with blue. I have tried this code but it did not work:
button {
outline: none !important;
}
and
button:focus {
outline: none !important;
}
Either way, I do not want to use that code because apparently it is bad for website accessibility.
Is there a way to get rid of the blue outline?
Thanks.
Try this
button:focus{
outline: none;}
I have done if my own, if you still got some error then send me HTML
In chrome the below button will retain it's outline after it has been clicked. If I looked at the buttons css settings after selecting the :active checkbox in chrome's developer tools I still can't see what the CSS values are for the outline. It appears to be about 1px in width and grey visually, but I don't see these values. Is there a way to see them?
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
In other words google chrome does add this style (As indicated by one of the answer below):
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
However when I click the focus checkbox in order to be able to see all the CSS that is triggered by focus, I don't see that style in the developer tooling pane ... Is it a google developer tooling bug or do other people see it?
There are actually two different styles that are automatically applied through through the user agent stylesheet to buttons; the pseudo-classes :focus and :active:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
button:active {
border-style: inset;
}
The :focus only applies to Chrome, and is responsible for the blue border you are seeing. Overriding this fixes the problem:
button:focus {
outline: none; /* Remove the outline */
}
button.active: {
border-style: none; /* Remove the border */
}
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
You can see that the :focus is getting added in the Developer Console through the user agent stylesheet (just below the inline elements in this screenshot):
Hope this helps! :)
The styles console in the chrome developer tools only shows what is currently selected in it's current state. If you want to see the rules for the other states a simple way is to go to the css file it self. To do that next to the element class there is a link as shown in the image below. Clicking this will open the actual css file in the specific row of the selected class. Assuming the other states are declared close to that you'll be able to locate the class you want.
Can you post a link to the website?
In the meantime, I would suggest looking the "Computed" styles tab
Side note about why this might be happening--I've noticed sometimes I haven't been able to see the :active styles when it's JavaScript controlling the button's state
Edit: Hi Ole, I can see your demo, thanks.
Based on Obsidian Age's helpful reply, I ran this code snippet and it got rid of the borders on click. That's the behavior you want, right?
<body>
<style>
button:focus {
outline: none; // Remove the outline
border-top: none;
border-width: 0;
}
button.active: {
border-style: none; //Remove the border
}
</style>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
By looking in the "Computed" tab (next to "Styles" when you're inspecting an element in Chrome), I saw that there was a gray, 2px-wide border-top, -right, -bottom, -left for the button. For some reason it was enough just to set the border-top property to none and the border-width to 0. I don't know why but I tried a bunch of other combinations that didn't work--this did it with the least amount of CSS.
I'm making my firs steps learning to code. I've been taken some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I made a summary. And when it's active it has a blue border.
I'm trying to remove it but I can't find a solution.
I tried suing this without success:
summary:active {
border:none;
}
Do you have some suggestion?
summary:focus{
outline: none;
}
The browser is rendering a border around the summary while it is on focus.
Problem: Its not the border but a outline that browsers render.
Solution: Set outline:none on the element.
So the code would be
summary:focus{
outline: none;
}
To remove it from all inputs
input {
outline: none;
}
To remove it from all tags use the universal selector *:
*:focus {
outline: none;
}
The problem is the input field, not the summary class itself. You can try removing it by using the following code:
input:focus{
outline:none;
}
Hope it helps
People have said to remove with outline: none, which will remove the outline.
However, from an accessibility perspective you should replace the outline with one that fits the brand guidelines.
The outline on an element's focus state is to ensure that someone can tell where they are. Not all users have a point-and-click device, and even if they do, they won't leave their mouse hovering over an element at all times. For field inputs it's worth keeping an outline or other focus style so users know which field they're in.
The A11y Project (accessibility project) has some useful information which covers what I've said.
I'd suggest that rather than doing:
summary:focus {
outline: none !important
}
You talk to the designer to come up a positive focus style, e.g.:
summary:focus {
background: #ffeeee;
color: #242424;
outline: none
}
If it is an input field try this
input:focus{
outline: none !important;
}
I was able to make the blue outline disappear in Safari 10 with:
summary {outline:none;}
Funny thing is that I can't change the specific color of the outline:
summary:focus{outline:red;}
Αlso removed the outline. Using solid and dotted all work as specified, and display it black.
But it looks like the blue color is hard-coded into focused input fields. The very text box I'm using right now has the same light blue outline. Maybe that can't be changed, but you can suppress its visibility or restyle it. You just can't specify a color.
*.no-outline > * :focus {
outline: none;
}
This would remove any the outline for any tag with class no-outline, and also it will remove outline for all its children.
I am using this CSS to remove dotted borders which appear when hyperlinks are clicked
a:active, a:focus, input {
outline: 0;
outline-style:none;
outline-width:0;
}
This is working fine, but doesn't work on input buttons which have background images.
It's not my place to question your design decisions, so here you go.
Just add this to any link's you want to remove the dotted line
onfocus="if(this.blur)this.blur()"
It isn't working fine. It is rendering it impossible to navigate the design without a mouse.
See http://24ways.org/2009/dont-lose-your-focus for a reasonable compromise.
You could add an onclick: blur(); so it keeps it tab-happy and doesn't ruin the design when clicked.
But for the record, this seems to work cross browser. The first part for IE, the second for FF:
input, input:active, input:focus{
outline: 0;
outline-style:none;
outline-width:0;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
You need classes to differentiate which links have dotted borders and which do not. Using the img selector won't be enough.
Style your input tags to not have dotted borders; you could even use a class for your input buttons if you have more than one style (Clear, Submit, Cancel, etc.)