NDY NDY - 1 month ago 14
Less Question

CSS Custom Radiobutton without text

Im searching the best way to style a custom radio button with pure CSS but without a label or label text.

At the moment I did something like that: (without the different states for checked, disabled etc)

input[type=radio] {
width : 28px;
margin : 0;
padding : 0;
opacity : 0;

& + label {
background: url("radio_unselected.png") no-repeat 0 2px;
padding-left : 28px;
line-height : 24px;
cursor: pointer;
}


That works perfectly as long as I got a label for my radios. As soon as I remove the label OR remove the label text, nothing is displayed. What is the best way to achieve my goal. Should I remove the background styles from the & + label and add it as background of the input itself and adjust the position so the radio would overlap the default radio style?

Ty for your help,
Andy

EDIT:

I added at least

&:before {
content:"";
display: inline-block;
}


Now I can actually add a label without text, but still not the perfect solution because a label tag is required.

Answer

I ran into the same dilemma. I want to use radio buttons as a pagination control for an image carousel. I came up with this:

input[type=radio] {
  visibility: hidden;
  position: relative;

  margin-left: 5px;
  width: 20px;
  height: 20px;
}

input[type=radio]:before {
  content: "";
  visibility: visible;
  position: absolute;

  border: 2px solid #eb6864;
  border-radius: 50%;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

input[type=radio]:checked:before {
  background-color: #eb6864;
}

This works without any extra markup. Here's the example I'm using for my carousel:

<input type='radio' name='test'>
<input type='radio' name='test' checked>
<input type='radio' name='test'>
<input type='radio' name='test'>
<input type='radio' name='test'>

See this fiddle. I've only tested this in a recent build of Chrome; I have no idea how compatible it is.