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*/

Tags:

Html

Css