CSS Custom Radiobutton without text - css

Question

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 1

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.

Answer 2

Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/

Answer 3

It seems like there is no perfect solution. You actually need to have an element like the label or a div/etc tag to change the radio style. One possibility is to build your radios with a label around the input field:
<label>
<input type="radio"....../>
</label>
Then you can actually try to add the styling through css. Not the best solution in my opinion, but it makes the styling a lot easier.