Filling Button with a Radio Button

Question

I was wondering whether it is possible to fill a parent button with a radio button and remove the default radio button styling, keeping the radio button functionality for the button.

<button>
  <input type='radio' />
</button>

Why. What is the usecase? You can use JavaScript to set a hidden field when the button is clicked — mplungjan, Nov 12 '21 at 09:10
Basically I am using Formik and Yup for input validation and need three separate radio buttons to select an input (wont work with buttons) — Luke Grech, Nov 12 '21 at 09:13
Show the HTML and what it needs to do and we have a better idea. What is the problem you are trying to solve? It sounds like an X/Y problem — mplungjan, Nov 12 '21 at 09:14
I just need a radio button (in a button as shown in the snippet) to fill an outer button styling. — Luke Grech, Nov 12 '21 at 09:18

score 0 · Answer 1 · answered Nov 12 '21 at 09:04

0

Hopping this is the desired behavior, this is my solution:

button input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  width:100px;
}

<button>
  <input type='radio' />
</button>

answered Nov 12 '21 at 09:04

D A

1,724
1
8
19

Doesn't work as a radio button as its hidden in the DOM, thanks anyway. – Luke Grech Nov 12 '21 at 09:09
I've answered to your question. You didn't mention what kind of functionality you need. – D A Nov 12 '21 at 09:12
Should have worded the question better, I need it to work as a radio button, but thanks for your reply, upvoted :) – Luke Grech Nov 12 '21 at 09:15

Filling Button with a Radio Button

1 Answers1