[Resolved] Styling the checkbox on a toolset form

[Author]

Posts

[Saul Baizman]

Hi there,

Please refer to the attached screenshot. I'm trying to address two issues in it:

+ The redundant name of the field. Here's the snippet of code from the CRED form editor:

<div class="form-group">
<p><label for="%%FORM_ID%%_may-require-account">[cred_i18n name='may-require-account-label']Account/Payment Required to Access?[/cred_i18n]<span class="required_field">*</span></label></p>
[cred_field field='may-require-account' force_type='field' class='form-control' output='bootstrap']
</div>

If I take away the <label> tag, then I remove the styled field name (in orange in the screenshot). It appears that the text in black in the screenshot is automatically generated from the [cred_field] shortcode. The documentation at https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_field seems to indicate there's no way to suppress the black text, but that is what I'd like to do (and left-align the checkbox).

+ The checkbox styling. I'd like to adjust the size of the checkbox and the background color when it's checked. I examined the element in the browser's web inspector and could not locate the style rule(s) currently in use. Can you help indicate where it's located or what the selector is? I thought the code might be in bootstrap.css, but I didn't see it there.

Thank you!

Saul

[Jamal]

Hello Saul and thank you for contacting Toolset support.

Indeed, the Toolset forms will always generate a label. You can hide it using CSS. By adding a class into the <div>tag, the <p> tag, or the <label> tag. Something like:

<div class="form-group hide-label">
<p><label for="%%FORM_ID%%_may-require-account">[cred_i18n name='may-require-account-label']Account/Payment Required to Access?[/cred_i18n]<span class="required_field">*</span></label></p>
[cred_field field='may-require-account' force_type='field' class='form-control' output='bootstrap']
</div>

Notice the "hide-label" class, and the following CSS:

.hide-label p {
    display: none;
}

And by using the CSS class in the wrapping <div> tag, you can target the checkbox with any CSS you want. Check this article on many ways to style the checkbox https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css

I hope this helps. Let me know if you have any questions.

[Saul Baizman]

My issue is resolved now. Thank you, Jamal!