CODEWITHSUNDEEP
cssreactjsreact-native
David Ciocoiu
David Ciocoiu

Reputation: 113

How do I remove the component border shown onClick in react?

Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so? Below there is a picture of what I get in my app.

Also, this is a link to a sandbox where I have the same issue: https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx

enter image description here

Upvotes: 5

Views: 12777

Answers (2)

goediaz
goediaz

Reputation: 652

This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:

button:focus {
  outline: none;
}

Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.

Upvotes: 4

0stone0
0stone0

Reputation: 44172

This is caused by the &focus css selector as shown bij the inspector.

enter image description here

Add outline: none to the <button> to remove it;

<button style={{outline: 'none'}} onClick={onInputSubmit}>

Upvotes: 13

Related Questions