0

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.

Aranius
  • 3
  • 5
  • 2
    ` – Ry- Sep 12 '16 at 08:26
  • Your JSFiddle works... The second button is bold. (Besides, your margin miss a unit) – Nicolas Sep 12 '16 at 08:30
  • the fiddle works for me in chrome - your second button is bold – Pete Sep 12 '16 at 08:31
  • If you click on the "Radio Numbe one" button, it will not change. The second will always stay bold. – Aranius Sep 12 '16 at 08:53

1 Answers1

1

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

Martin Lemahieu
  • 51
  • 5