Ninja Form: css to style tick-mark on checkboxes

  • Resolved SunnyOz

    (@sunnyoz)


    4 years, 3 months ago

    I am using the following: Ninja Version: 3.4.25 / WordPress Version: 5.5 / Bootstrap Version: 3 (or maybe 4)

    I love the bold and larger look of the default contact form that you provide.
    However, for one website, the client would like a slightly smaller tick-mark for the check boxes I have added to the contact form, and would also like to change the colour of the tick once a checkbox is selected.
    I have already adjusted other parts of the form to suit the style of their website.
    But I can’t seem to find the correct CSS code to alter just the tick-mark. Can you point me to the css you use to create the ‘larger’ sized tick-marks, so I can customise it for my client?

    Thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter SunnyOz

    (@sunnyoz)

    Sorry.. I submitted this question too soon.

    I finally found how I could change the sizing/colour of the checkbox tickmark.

    I’ll give the details below in case it helps others:

    .nf-field-container .nf-field > .listcheckbox-wrap > .nf-field-element li input[type=checkbox]:checked + label:before{
	your css styles go here
}
Viewing 1 replies (of 1 total)
  • The topic ‘Ninja Form: css to style tick-mark on checkboxes’ is closed to new replies.

Tags