I have a link (in fact a dropdown menu link) when clicked I have a dashed border around this link.
How can I avoid this behaviour?
Thanks.
Use the CSS :focus and :active specifiers:
.yourclass:focus, .yourclass:active {
outline: 0; /*make sure no outline appears*/
}
And a little working demo: little link.
Hope this helped!
As an addendum to Chris's, answer (can't comment yet)
Make sure to also include
.yourclass:focus { outline: 0; }
to keep the outline from showing up on some corner cases where the focus remains on an element.
Related
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.
Is it possible to disable button moving after clicking on it ?
button
{
background:none;
border:0px;
}
I want button to seem like navigation bar item and need to disable animation during clicking the button.
The animation of a button is caused by the border or outline of your button so if you specify a constant border and remove the outline, then no animation will occur.
button {
outline: none;
border: solid 1px #c5c5c5;
}
You may need to add !important to override click styles
I also was looking to solve this issue and found that it was the padding that was making the button "animate". I had buttons with no background though so you may have to implement #user3481932's answer of adjusting the border and outline styles as well.
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.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
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:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
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....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I have a simple div that if clicked to much turns blue: JsFiddle
In Chrome its worse, the whole div(30x30px + some other surounding elements) turns blue. Is there anything I can do about this (other than using img)?
Sorry for asking, but isn't this just you marking it by double-clicking it? The "blue" highlight effect would be the normal behaviour in all browsers...
If you do not want this behavior, you should make sure it is not selectable by applying styles:
-moz-user-select: none;
-webkit-user-select: none;
Updated:
For Internet Explorer, use the unselectable tag on your div:
<div class="right" unselectable="on">»</div>
This CSS will do the trick:
div::selection {
display:none;
}
It sets the selection (highlight) to display:none, so you don't see it.