Styled buttons onClick outline

Tell us what’s happening:
just wrote the HTML and CSS for my calculator. Click the buttons and you will see what I mean. border-radius is 50% but when you click on them the outline of the full square button looks horrible. How do I access that?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Build a JavaScript Calculator

Link to the challenge:

Maybe it’s just me, but I can’t click the buttons.

As for your actual question, you are talking about the default focus outline that the browser adds to the button. There are several ways to handle this.

First, you can actually change this with CSS so that the outline only shows up if you are using the keyboard to activate the buttons (you always want a focus indicator to show up when using the keyboard but you don’t need it for people using a mouse or touch). You can do this with the :focus-visible pseudo-class. Using this method, your mouse/touch users will never see that “ugly” focus indicator.

Second, the square outline complaint has been around for a long time and it’s just now that browsers are actually going to fix it by allowing it to follow the border radius setting. If you don’t want to wait around for them all to fix it then you can set outline: none and use box-shadow instead to draw a focus indicator (which will allow you to make a rounded indicator). The important point here is that people using a keyboard to navigate your page should always see a focus indicator around buttons (and any other elements that can receive keyboard focus), so if you do remove the outline then you need to replace it with something else.

P.S. Technically, you could change the color of the button to represent the focus state and do away with focus outlines completely. I like focus outlines better because I think that’s what most keyboard users are used to, but as long as you can make the button that has focus clearly identifiable from the other buttons so it is obvious to the user which button has focus then you could use just a color change only.

its only HTML and CSS right now so the buttons don’t have any function yet. Do you get the square border when you physically depress the left mouse key? (no sarcasm, just being explicit because I’m interested) Its because I have a <button> styled with a {border-radius: 50;} i’m sure. I have another project, same issue…
Jack Handy Thought Gen

No, I don’t. I cannot use the calculator at all with the mouse. Clicking a button does nothing. I am able to Tab through the buttons with the keyboard, but clicking with the keyboard does nothing as well.

Ahh, I didn’t read your post above close enough. The buttons don’t have any functionality yet. Got it.

OMG yes! I’m using chrome…its so gnarley. Thats a great answer, thanks.

OK so you can tab through the buttons. That’s good. How do the buttons change when you tab to them and what browser do you have? This is fun.

I’m out of time for tonight (I’m old and it’s past my bedtime). You should be able to Tab through your buttons and see the focus outline. I always test these things with at least Chrome and Firefox, and sometimes I’ll throw in Edge. I don’t have a Mac so I can’t test on Safari.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.