Can't find the css for a focused/clicked button in Chrome [duplicate]

Question

I have this image below, it a button.

I've set the border-radius to 50% to make it round. How can I either set the focus highlight around the button be round or not show it at all?

I can't seem to find the :focus or :clicked css in the Chrome begugger.

Here is the html

<button id="frontSave" type="button" class="btn btn-lg"><i id="cameraIconFront" class="fal fa-camera fa-2x"></i></button>

As far as I know you can't get border-radius to apply to outline, but if you need a highlight that does conform to the radius, you can use box-shadow instead. It should be pretty easy to make it look just like the native outline. If you have any followup questions, just @ me and I'll try to respond later tonight. — Joseph Marikle
– Joseph Marikle, Commented Dec 14, 2018 at 23:00

Chris W. · Accepted Answer · 2018-12-14 23:03:38Z

3

You'd just override the user agent stylesheet and replace the default outline with a border

Cheers

body {text-align:center}

button {
  border-radius: 50%;
  margin: 2rem;
  padding: 2rem;
  border: transparent 3px solid;
}

button:focus {
  outline: none;
  border: red 3px dotted;
}

<button>FOCUS<br/>TEST</button>

answered Dec 14, 2018 at 23:03

Chris W.

23.4k4 gold badges63 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Can't find the css for a focused/clicked button in Chrome [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related