Unable to Style the checkboxes in Sitecore Forms

Question

I am unable to style the checkboxes in Sitecore Forms. I want to use the something like this.

When I apply the css classes from the Sitecore Forms, the class applies to the input fields, I want it to be available in the each of the checkbox labels.

Answer 1

In order to style the custom checkboxes you must have a class on parent, because CSS does not allow a parent selector. For that you can modify the View/

Go to wwwroot\[sitecore-instance]\Views\FormBuilder\FieldTemplates\CheckboxList.cshtml and in foreach loop you will get its Markup. Update it with your CSS class and add a tag enclosed

Make sure to document this change, or you will face troubles in Sitecore version upgrades.

@foreach (var item in Model.Items)
{
    <label class=" @Model.CssClass-group" >
        <input type="checkbox" class="@Model.CssClass" name="@Html.NameFor(m => Model.Value)"@if (item.Selected)
    </label>

@Html.NameFor(m => Model.Value) }

Answer 2

I came across with same situation and in my case I handled it differently instead of modifying .cshtml file which comes with OOTB.

In my case if I am using checkbox list control I added that list to inside section control.

Now I have ability to add class on section control and here I can use the child selector to style my checkbox list.

And If I am using single checkbox then I have option for adding custom class on both label as well as checkbox.

I added css for my custom classes and it was working for me.