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

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, Dec 14 '18 at 23:00

score 3 · Accepted Answer · answered Dec 14 '18 at 23:03

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>

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

1 Answers1