user1554433 user1554433 - 2 months ago 6
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:

<div>
<label>
<input type="radio" name="test" class="hide-input" />
<button class="radiobutton">Radio number one</button>
</label>
</div>
<div>
<label>
<input type="radio" name="test" checked="checked" class="hide-input" />
<button class="radiobutton">Radio number two</button>
</label>
</div>


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;
}

.radiobutton{
margin: 5;
}

.hide-input:checked+.radiobutton
{
font-weight: bold;
}


Here is a jsfiddle exmaple to try it: http://jsfiddle.net/q7nvpmvj/

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.

Answer

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.

JSFiddle

EDIT : Also, you can use a simple display: none; on your radio inputs to hide them.

Updated JSFiddle