-2

enter image description here

I am trying to make a custom HTML button element, but chrome highlights it (like above) when it is clicked. How do I prevent this from happening?

0

3 Answers 3

1

Solution(s) :-

button:focus {
    /** Your CSS styles**/
}
button:active {
    /** Your CSS styles**/
}

Explanation(s) :-

The :focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard events 
or other user inputs.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.

Browser Support
Chrome  Safari  Firefox Opera   IE  Android iOS
4+      3.1+    Any     9.6+    8+  Any     Any

Syntax ::

:focus {
    css declarations;
}
:active {
    css declarations;
}

Notes And References :-

w3schools Reference (Focus Selector) ::

w3schools Reference (Active Selector) ::

Stack Overflow Solutions ::

Sign up to request clarification or add additional context in comments.

Comments

0

G'day - this is the focus state of the button. You can style it as follows:

button:focus {
  outline: none;
  /** Any additional styles go here **/
}

For more information on focus take a look at this article from CSS tricks: https://css-tricks.com/almanac/selectors/f/focus/

Comments

0

Use this code

a:visited {
    outline: 0;
    border: 0;
}

See the code for better understanding about button behavior... https://codepen.io/zakirbd/pen/wmxxGX

1 Comment

Codepen link returns a 404 error

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.