Radio Buttons

Is it possible to style Radio Buttons
with just using pure CSS?

input[type="radio"] {}

It seems so…
http://codepen.io/mitchmc/pen/pebIx

And

1 Like

Yes as shown above but note that you are actually styling an associated label to look like a checkbox and not styling the input itself which is pretty ‘un-stylable’.

It is generally better not to use display:none on the input because I believe this affects the ability to tab to the element and may confuse screen readers etc. You can set its opacity to zero and place it on top of the styled label so that it still works as expected.

1 Like

I think the pen is using a technique without the need of sprite though? isnt it styling the input
directly?

Im assuming you can style it using JS.
.

ah i see ill keep this in mind for the future

The only “direct” styling of the inputs in the codepen is display: none

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Oh right forgot about that.

You can style the label like you can any other element so you don’t need an image if you can use border-radius and background-colours/gradients etc. However if you want a graphical element that can’t be constructed in CSS then you would need an image (or sprite).

As Mittineague said above the input is not styled at all but hidden with display:none.

No you can’t style a radio with js as styling is CSS territory.:). (Any radios that use js routines are probably swapping them out for a normal element instead.)

A radio or checkbox can take simple styling such as colours (depending on browser ) but as all browsers have different versions of these controls it is pointless to take this approach.

Styling the label to look like a checkbox or radio is the best approach and maintains accessibility if you don’t display:none the input as I mentioned above.

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