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?
No outline - with outline