A method I use to customize the design of a checkbox input is to put the input tag followed by the label and then use the css

Code: Select all

input[type="checkbox"]:checked + label

. I then style the

Code: Select all

:after

pseudo-element of the label to replace the default checkbox style.

However, using Couch's input checkbox tag, it wraps the input in the label which makes this impossible. Is there any other way I can customize a checkbox?

[cheesypoof]

Hi and welcome @hidanielle,

I completely understand your dilemma; I have found myself in a similar situation on past projects.

The best I can come up with for checkboxes and radio buttons is to hack the option name to add an element that can be styled appropriately:

Code: Select all

<cms:input name='colors' opt_values='<span></span>Red=r | <span></span>Green=g | <span></span>Blue=b' type='checkbox'/>

The resulting markup is as follows:

Code: Select all

<label for="colors0"><input type="checkbox" name="colors[]" id="colors0" value="r"/><span></span>Red</label>
<label for="colors1"><input type="checkbox" name="colors[]" id="colors1" value="g"/><span></span>Green</label>
<label for="colors2"><input type="checkbox" name="colors[]" id="colors2" value="b"/><span></span>Blue</label>

Let me know if you have any questions.

Thank you! This worked perfectly.