CODEWITHSUNDEEP
htmlcss
Latcie
Latcie

Reputation: 701

CSS focused button keeps border

I have this:

.some-button: focus {
    background-color: red;
    border: none;
}

But still when I click on it, it does turn red, but there is still a visible border. Is there something I'm missing that's applying the border?

Upvotes: 0

Views: 1678

Answers (3)

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

You just need to remove the space before focus and add outline: none.

.some-button:focus {
    background-color: red;
    border: none;
    outline: none;
}
<button class="some-button">Some Button</button>

Upvotes: 3

Derek Wang
Derek Wang

Reputation: 10193

When focusing an element, outline style is set globally so you need to update the value of outline too. And also remove the space before focus.

.some-button:focus {
  background-color: red;
  border: none;
  outline: none;
}

Upvotes: 1

Osman Durdag
Osman Durdag

Reputation: 955

Maybe, this is what do you want:

.some-button:focus {
    background-color: red;
    border: none;
    outline: none;
  }

Upvotes: 1

Related Questions