CODEWITHSUNDEEP
htmlcss
Danny Goodall
Danny Goodall

Reputation: 838

Border appearing on focus of button

I have two buttons on my web page which look as follows...

Image of buttons

The button on the left has the correct style border; thin and with no rounded corners.

The button on the right, which currently has focus, does not have the correct style border. When Inspecting the element within chrome, it has the following properties...

element.style {
    position: absolute;
    bottom: 25px;
    border: none !important;
    right: 140px;
}
.btn:focus {
    border-radius: 0px;
}
.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090;
}
.btn.focus, .btn:focus, .btn:hover {
    text-decoration: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

I would have thought that applying the border: none !important css property (while the element was forced into a focus state would have worked, but apparently not.

Furthermore, even when I set the border-color to yellow while the button is focused, this effect is not applied.

How can I prevent the border from being rounded off, so that it stays square and the corners remain a 90 degree angle?

Upvotes: 2

Views: 2199

Answers (2)

Sagi Rika
Sagi Rika

Reputation: 2979

What you see as an outline.

Just add this line to the button's css:

outline: none !important;

The purpose of the outline is accessabilty, so you should think carefully about removing it. You can always change the way the border looks instead.

As for !important, if you write your css right, you shouldn't use it. Inline css (style='color: blue') supercedes classes and id styling, so in your case the !important might be redundant.

Upvotes: 4

AdamKniec
AdamKniec

Reputation: 1717

There will be a lot of suggestions to remove the outline. Before You decide to do so, please note that it'a a really bad practice from the accesibility point of view

https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968

Upvotes: 0

Related Questions