Custom radio buttons, bizarre issue.

[Casper Sørensen]

Hey guys,

I stumbled upon a pretty bizarre problem today with my CSS code. I will try to describe the issue as well as I can:

• Im using radio inputs that i’ve styled using CSS3.
• My form is spread over 2 divs, which forces me to move my tag outside of these

The issue is that the last of my radio inputs won’t inherit the styling when it is checked.

If I remove my <form>opening tag, the radio input works just fine, and inherits the styling as it should.
I tried to remove the javascript from the document, but to no avail.

Can anyone help me solve this issue?

N.B: My form is spread over 2 divs, which forces me to move my <form></form> tag outside of both sections, to ensure that my form works correctly.

**I’ve posted some code below that are relevant to solving the issue (I believe).
**

<form id=”tryitForm” method=”POST”>
<section class=”select-event-section clearfix”>

<h2 class=”text-center small-title”>Vælg aktivitet</h2>

<h4 class=”activity-title”>Bubble Ball<br>_{for 20 personer}</h4>Sjov underholdning for op til 20 personer med bubble-ball.

Nu 3999,-

<hr>

<input type=”radio” name=”rGroup” value=”Sport” id=”r1″>
<label class=”radio” for=”r1″></label>

<h4 class=”activity-title”>Bubble Ball<br>_{for 20 personer}</h4>Sjov underholdning for op til 20 personer med bubble-ball.

Nu 3999,-

<hr>

<input type=”radio” name=”rGroup” value=”Sport” id=”r2″>
<label class=”radio” for=”r2″></label>

<h4 class=”activity-title”>Bubble Ball<br>_{for 20 personer}</h4>Sjov underholdning for op til 20 personer med bubble-ball.

Nu 3999,-

<hr>

<input type=”radio” name=”rGroup” value=”Sport” id=”r3″>
<label class=”radio” for=”r3″></label>

<label>Vælg en dato for</label>

<input type=”text” class=”form-control”><i class=”fa fa-calendar”></i>

<i class=”chevron_toggleable large-icon fa fa-angle-down”></i>

</section>

[Paulie_D]

Perhaps you could make a Codepen.io example instead of a codedump?

[Author]

Posts