user1554433 user1554433 - 1 month ago 4
CSS Question

CSS + selector not working for input and button

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>

And my css style:

.hide-input {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
margin: 0;
padding: 0;
border: 0;
opacity: 0.001;

margin: 5;

font-weight: bold;

Here is a jsfiddle exmaple to try it:

Anyone cann elaborate why it is not working with button element? Is there a possible fix?

UPDATE: The problem is, when I click on button one, it will not change the style.


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.

Updated JSFiddle