I wanted to apply outline-style: none; to all my buttons in my html page. I created a class:
.outlineNone {
outline-style: none;
}
and assign the class to all my buttons. But it seems not be working. It seems to be only working when I apply the style inline with my html.
Can anyone explain to me why this is happening?
To clarify, I want to get rid of the blue rectangle that appears after you click on a button like the image below:
instead outline-style just use outline, plus you can reset the button style even more by setting border to 0
like this:
.outlineNone {
outline:0;
border:0;
}
Try with:
.outlineNone {
outline-style: none !important;
}
It seems to be a problem with some other structure which is modifying the outline-style that has bigger priority than just a class. (it can be an ID or the Button class itself)
Related
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
.button , button{
border:solid black 2px !important;
}
With this code I have provided a frame for all buttons. However, I don't want to have a frame for the buttons "searchsubmit" and "single_add_to_cart_button". How do I do that ?
It is not that difficult.
There are two ways ways for that first is simpler and is recommended!
.noBorderButton{
border : none !important;
}
and in your HTML you can add the class "noBorderButton" to your buttons.
<button class="noBorderButton">Search Submit</button>
P.S. Make sure to follow the CSS overwriting rules i.e. write the .noBorderButton CSS below the Button CSS.
EDIT : As I can see Martin suggesting this will change the user agent styling and button won't have any Border at all, and probably you don't want that either!!
You may go with the Following Option
button:not(.noBorderButton){
border:solid black 2px !important;
}
And yes again add the class 'noBorderButton' to those buttons in which you don't want these styling to work.
I believe those are your class names. If yes, then you can add border: none !important.
button.searchsubmit,
button.single_add_to_cart_button {
border: none !important;
}
simply do:
Class:
.searchsubmit {border:none;!important} and .single_add_to_cart_button {border:none;!important}
Id:
#searchsubmit {border:none;!important} and #single_add_to_cart_button {border:none;!important}
It can be cleaner but this works to... :)
you can use the not css selector
.button , button:not(.searchsubmit):not(.single_add_to_cart_button) {
border:solid black 2px !important;
}
It's pretty simple, you can use :not selector to ignore those two button having your specific classes :
.button , button , button:not('single_add_to_cart_button') , button:not('searchsubmit') {
border:solid black 2px !important;
}
or you can do it from a reverse way which i do not recommend, its like you set a border to a button and then you unset it :
button.searchsubmit , button.single_add_to_cart_button {
border: none !important;
}
(ofcourse the style above must be after your .button and button style in-order to override it)
my button has this weird border appearing when clicking on it.
how to remove it?
below is the html and image example
Buy Now
Only While Supplies Last
Just set your button outline to none:
input[type="button"]{
outline:none;
}
input[type="button"]::-moz-focus-inner {
border: 0;
}
It's just an outline. You can rid it out by using:
button: {
outline: none;
}
You can simply fix this with css outline property, you need to remove the default outline
button {
outline:none;
}
The outline property in CSS draws a line around the outside of an element. It's similar to border except that:
Read outline properties
CSS tricks outline Property
button: {
outline: none;
}
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 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"]);