A while ago, I found a css stylesheet for checkboxes and radio buttons, which could use font-awesome icons as symbols. I had just used the checboxes until recently, but expanded my form to include radios as well. When clicking a radio button, the outline was very prominent for the active radio button, which puzzles me. The stylesheet is so great, and well structured, I figured this is probably the authors intent, and not a bug, as there is a seperate CSS bracket for this alone:

.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;

I don't understand why anyone would have outline activated on radiobuttons though, as they are all about state, not changing content, like a text input. I would like to remove it, but thought I should ask if there are any good reasons to keep it, from a UX perspective. Are there?

enter image description here enter image description here

No outline - with outline


Accessibility. Focus state tells keyboard users where their cursor currently is on the page.

By just visually looking at a form with a focus state on a radio button I would instantly know that if I press tab then I will move from this field to the next.

Without the focus state you won't have any visual indication of where they are on the page.

Now, whether or not you need to show the focus state when clicking with the mouse is a different question. But the reason for having a focus state is for keyboard users.

  • That makes sense. I believe that most people would use a mouse to navigate through most forms though, and for aesthetic reasons, I will remove it. – jumps4fun May 11 '16 at 12:42
  • 1
    @KjetilNordin Ah, yes. Who cares about accessibility anyway. Provided things look nice then it doesn't matter if a significant percentage of people find it difficult to use. – JonW May 11 '16 at 12:44
  • Hehe, I do get your point. But aesthetics are important, and I estimate the possible number of people using this particular form, only by their keyboard, to be close to no one. But now I know that I need to consider users like that in future forms, and that is good knowledge, so thanks a lot :) – jumps4fun May 11 '16 at 12:47
  • 1
    I base it on the fact that there are no text input fields in my form, and that the rest of the application is used by mouse navigation as well. Also, it is an internal company application, and I know all of the people who will use it. It might be overly perfectionistic to care so much about a tiny detail like that for such a narrowly used application, but as I already said, I did learn something I can use in future cases, by actually asking. – jumps4fun May 11 '16 at 12:53
  • 1
    I'm happy I asked, and thankful I got a good answer :) – jumps4fun May 11 '16 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.