Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet:
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div">
<div class="d-flex justify-content-between">
<div class="stripe-payment-div">
<input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value="">
<label class="form-check-label" for="stripePayment"> Credit Card (Stripe) </label>
</div>
</div>
</button>
</h2>
</div>
</div
My issue is that when I click outside of the input field, the radio button does not get selected. While I understand that using jQuery might be the best solution, I was wondering if there's a way to achieve this functionality with just CSS?
I am looking to have the radio button selected whenever a user clicks anywhere within the .card class.
Thank you!