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.
Related
If you run the following demo, and click+hold(hold for 1sec before releasing the click) on the third link, you will see they get the same styles of :focus pseudo selector from the css(red outline).
.ext:focus {
outline: 1px dotted red;
}
1. Get me in focus with tab to see black outline -- Browser default
<br><br>
<a class="ext" href="#">2. Get me in focus with tab to see red outline -- ext css </a>
<br><br>
<a class="ext" href="#">3. Click+hold to see red outline -- supposody gets me in focus </a>
<br><br>
4. Click+hold to see black outline -- doesnt work as expected!
My gut feeling is that when you click+hold on any focusable element, it gets that element in focus, thats why you see a red dotted outline on #3 link.
Now, then why in the fourth link when you click+hold you don't see a black outline?
It is true that when you click on a focusable element it gets infocus as well, but your misconception is that the browsers internally apply the following css:
a:focus {
outline: 2px solid black;
}
In reality the browsers use the focus-visible css property like this:
a:focus-visible {
outline: 2px solid black;
}
focus-visible is a css4 level property recently introduced by most browsers(except safari). It has been designed specifically for what have you observed. This behaviour gets even more apparent in case of input fields(check out MDN's example), where you don't have to hold the click to see the result. In the case of anchor tags focus-visible applies style to only those elements who've been focused through the keyboard not the mouse. It should be noted that the button element behaves similar to a element, but the input element treats focus-visible identical to focus, that is even on click it gets the styles mention in input:focus-visible{...}.
Example:
input:focus-visible, button:focus-visible {
outline: 2px dotted black;
}
<input type="text" value="Click/tab shows outline">
<button>Only tab shows outline</button>
Moreover, you can inspect element in your browser and toggle element's state to focus-visible. You will see the following styles being applied by the user-agent(chrome):
a:-webkit-any-link:focus-visible {
outline-offset: 1px;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
user agent stylesheet
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
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've encountered this weird bug with the hover effect in Chrome 46.
There's a list of items and only some of them should highlight when hovered over, but the result is not as expected.
Furthermore, when opening debug and enabling the hover effect on the element that should highlight, it starts working fine afterwards.
It seems like the second hover rule is not triggering for some elements
ul.listings li.listing:hover {
border-color: #ccc;
}
ul.listings li.listing:hover div.special {
color: red!important;
}
Fiddle: http://jsfiddle.net/celsum/nLrveyfs/
It works fine in Firefox 42 and IE 10.
Also, a screenshot of what's happening in case it's a non-issue for others: http://snag.gy/oHG9v.jpg
This problem is due to the fact that your div.special is of different height than li.listing. So when you hover only on the word 'Special', the color changes to red and it does not change to red when you hover on the list containing div.special(This is the problem which I found in Chrome 47). So for this, I have added some changes to your CSS:
div.special{
height:60px;
}
ul.listings li.listing div.special:hover{
color: red!important;
}
Also here is an Updated Fiddle for the same.
Hope this helps.
EDIT:
If you just want to change the style of the div.special when li.listing is hovered then change your CSS like this:
ul.listings li.listing div.image div.special:hover{
color: red!important;
}
Here is a JSFiddle for the same.
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;
}
I have made a div tabbable with the tabindex attribute to make hidden content accessible.
Currently when clicked with the mouse the div gets browser :focus styling.
Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.
Div with tabindex='0' gets browser focus styles on mouse and keyboard
interaction
Anchor gets browser focus styles on keyboard interaction
only
I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.
Any help would be great, I'm genuinely at a loss.
Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/
Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.
div:focus {outline: blue solid 2px;}
Kub suggested a JS solution, but why use js if you don't actually need to?
I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.
document.addEventListener("mousedown", () => {
document.body.classList.add("using-mouse")
document.body.classList.remove("using-keyboard")
})
document.addEventListener("keydown", () => {
document.body.classList.add("using-keyboard")
document.body.classList.remove("using-mouse")
})
The in the css you can do something like:
.using-mouse :focus {
outline: none;
}
.using-keyboard :focus {
outline: auto 5px blue;
}
I would suggest to don't be specific on tags like div, p, span
let's write one common selector to achieve this functionality for all the elements.
*:focus {
outline: blue solid 2px;
}
If you want to be specific then I would suggest this one.
*[tabindex]:focus {
outline: 2px green solid;
}
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if
:focus {
outline: 2px solid lime;
}
is used it will show outline on every element that is getting focus, but I found out that if I use
Change Tabindex Style - for all elements:
:focus-visible {
outline: 2px solid lime;
}
this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
If you can use javascript, try use onclick attribute.
onclick="this.blur()" for lost focus
onclick="this.focus()" for set focus
Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/
Disadvantage is visible focus style if you hold mouse key for a longer time.