I'm trying to put a <button> inside an <input type="radio">'s <label>
An idea is to add pointer-events:none;
to the button but you won't have the styles of the :focus
,:active
and :hover
state.
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
You can, however, add your own custom :focus
:active
:hover
and :checked
state with:
input[type="radio"]:focus + label button{
/*add checked style here*/
label:hover > button {
/*add hover style here*/
}
label:active > button {
/*add active style here*/
}
input[type="radio"]:checked + label button{
/*add checked style here*/