-1

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

enter image description here

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.

enter image description here

6

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) }

3

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.

enter image description here

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

enter image description here

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

  • No. I even had to update the markup to show text in span after the input tag. Custom styles for checkboxes are complex – Sitecore Sam Nov 19 at 4:19
  • @SitecoreSam Anyway I think what you did is correct but you need to find another way if you are no longer working with project and some upgrade come it will break your changes – Yogesh Sharma Nov 19 at 4:45
  • 1
    Yes that's why I mentioned to document it. – Sitecore Sam Nov 19 at 5:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.