I'm trying to do a hidden radio-button with buttons element. The CSS style with + selector works when I use span element, but with the button element it seems not to work.
My HTML code:
<input type="radio" name="test" class="hide-input" />
<button class="radiobutton">Radio number one</button>
<input type="radio" name="test" checked="checked" class="hide-input" />
<button class="radiobutton">Radio number two</button>
clip: rect(0 0 0 0);
The button behavior have priority over the label behavior. Also it couldn't have work because
label need a
for attribute to target the input's ID.
The workaround here is to have a simple label instead of the button, then to give your label the style of a button.
Here is a fiddle showing this, of course you can modify the label style to get closer to the original button style.
I hope this will achieve what you wanted to do.
EDIT : Also, you can use a simple
display: none; on your radio inputs to hide them.