I already know how to make an <input type="radio">'s <label> look like the button of any specific browser's default <button> by playing with the CSS until it looks identical to the <button> I'm trying to replicate. But this will look out of place whenever someone views it from a browser that has a different default <button>. (Even if I could replicate every default <button> for every browser, a new one will probably be invented tomorrow.)
Therefore, I want to use an actual button to get the default styling appropriate to the browser.
A recreation of the code so far:
<h1>Choose A or B</h1><label><button type="button"><input type="radio" name="choice" value="A">A</button></label><label><button type="button"><input type="radio" name="choice" value="B">B</button></label>Later I'll change <input type="radio" name="choice" value="A"> to <input type="radio" name="choice" value="A" hidden> and use some other styling to show if it's checked or not, but for now I'm leaving it in for diagnostic reasons.
If you run the snippet, you'll notice that clicking the <input type="radio"> works as intended, but clicking the <button>itself does nothing.
Here is another failed attempt:
<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>I even tried adding the disabled attribute. Nothing is working as intended. Should I give up and style the <label> manually, or is there a way to access <button>'s default appearance anyway?
(Yes, I already know I could use javascript to simulate <input type="radio">'s behaviour on a <button> but I'm going to have lots of buttons in lots of groups throughout the website. So I'll just style <label> manually if it means the website will be easier to maintain. Likewise for installing an entire library just for this one problem.)