Question

I’m using Ryan Fait’s Custom form elements plugin http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ for checkboxes and radio buttons styling.

<input type="checkbox" name="check" value="" class="styled" id="check" />
<label for="check">Check me!</label>

Plugin finds input with .styled class, hides it and adds a <span> element instead.
This works fine until I add another CSS class to the input:

<input type="checkbox" name="check" value="" class="styled required" id="check" />
<label for="check">Check me!</label>

In this case default input disappears but as I understand after this <span> element is not added and I only see the label. Looks like the plugin just can’t find element with ‘.styled’ class.

It’ doesn’t matter what class I add to the input before or after .styled class, so I\m sure it’s not a CSS issue.

Does anybody have the same issue?

Thank you!

Answer 1

The problem was in the plugin.

If you are using Ryan Fait’s Custom form elements and there is a need to add more classes to input element, the plugin must be edited.

What I did to fix this behavior is a next little change. I replaced this statement

inputs[a].className == "styled" 

with this one

($(inputs[a]).hasClass("styled"))

in all cases. After this styling started working correctly.