[Resolved] Toolset forms Checkboxes and Radiobuttons custom style

[Author]

Posts

[umbertoZ]

Hi, I'd like to change the style of Checkboxes and Radiobuttons on some Toolset forms.

I'd like to implement this Bootstrap 4 styling:

hidden link

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Is it possible to change the html output of [cred_field field='type-of-training' force_type='field' class='form-check-input' output='bootstrap'] to get the desired output?

Is there any other way to style it?

thanks

[Christian Cox]

Hi, unfortunately there's not an easy way to modify the output template generated by Forms. You have the ability to modify a few specific attributes using the CRED API, but the HTML markup structure isn't one of those attributes. You might be able to use JavaScript to restructure the DOM after the Form loads, but I can't predict the effect this would have on the Form's functionality, including validation and submission of data. That type of customization isn't supported here in the forums.

https://toolset.com/documentation/programmer-reference/cred-api/#cred_filter_field_before_add_to_form

[umbertoZ]

My issue is resolved now. I added some custom CSS and jQuery to style Checkboxes and Radiobuttons.

Thank you!