Lost functionality turning radio button square

Question

The code below is for a landing page in Marketing Cloud. I have been able to turn the radio button square but when I do they are no longer clickable. Any help would be greatly appreciated.

<div class="radio_heading">
    <b> My communication preference is: </b>
</div>
<form action="" method="POST"> hmtl <div class="preference_form form_grid">
        <div class="radio_option">
            <input type="radio" name="Communication_Preference" value="Email" %%=IIF(@commPreference=="Email" , "checked" , "" )=%% />
            <label> Email </label>
        </div>
        <div class="radio_option">
            <input type="radio" name="Communication_Preference" value="SMS/Mobile Messaging" %%=IIF(@commPreference=="SMS/Mobile Messaging" , "checked" , "" )=%% />
            <label> SMS/Mobile Messaging </label>
        </div>
        <div id="sms_disclaimer"> By opting in you consent to receive SMS notifications. Message and data rates apply. You may opt out of SMS messaging at any time by changing your preference on this page or by texting "STOP" to 34313. </div>
        <div class="radio_option">
            <input type="radio" name="Communication_Preference" value="Direct Mail" %%=IIF(@commPreference=="Direct Mail" , "checked" , "" )=%% />
            <label> Printed Mail </label>
        </div>
    </div>
    <input hidden="" name="subkey" value="%%=v(@subscriberkey)=%%" &gt;="">
    <div class="update_button">
        <button type="submit" onclick="swal.showLoading()"> Update </button>
    </div>