Possible to style checked checkbox fields?

  • Resolved dilusionz

    (@dilusionz)


    7 years, 9 months ago

    Hellos,
    I can’t figure out how to style checked boxes with caldera due to the nature of the markup.. 99.9% of info I can find has the input outside of the label like

    <input type=”checkbox” id=”c1″ name=”cc” />
    <label for=”c1″>Check Box 1</label>

    But caldera outputs the input inside the label eg.

    <label for=”xxx”>
    <input type=”checkbox” id=”xxx”>
    the label text
    </label>

    Making using something like input[type=checkbox]:checked + label {styles} rather hard.
    There some workarounds but this requires the label text to at least have a span tag or something around it as far as I can tell.

    Is there some ninja way of doing this through CSS I haven’t managed to figure out yet ?

    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Nicolas Figueira

    (@nahuelmahe)

    Hello @dilusionz,

    Thank you for using Caldera Forms.

    I can’t think of anything in traditional CSS.

    That can be done in sass using something like

    Label {
  Input:checked & {
       Styles
 }
}

    I hope that helps.

    Best regards

    Plugin Author Nicolas Figueira

    (@nahuelmahe)

    Hello @dilusionz,

    Thank you again for using Caldera Forms.

    Please forget my previous answer, that wouldn’t act like you need.

    All I can think of right now is using jQuery, https://api.jquery.com/parent/

    I hope that helped.

    Best regards

    Hi @dilusionz,

    I had the same problem and found this tutorial.

    To make it work you would need to alter the html, this can be done using the following filter:

    add_filters( 'caldera_forms_render_field_type-checkbox', function( $field_html ) {
	$field_html = preg_replace( '/<input(.*?)>/', '<input$1><div class="control-indicator"></div>', $field_html );
	return $field_html;
} );

    You can see the result on the form at the bottom of this page

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Possible to style checked checkbox fields?’ is closed to new replies.