Using CSS :checked for styling labels

  • Resolved PODxt

    (@podxt)


    9 years, 3 months ago

    Hi, I’m trying to style a radio label and use the checked selector to accomplish that: when the radio button is checked, a style is applied to its label.

    I would need to add to the label html the “for” attribute like

    <input type="radio" id="hey" name="test" value="yes">
<label for="hey">yes</label>

    so I can apply a CSS rule like the following:

    input[type=radio]:checked + label{
    font-weight: bold;
}

    Is there a way to do that?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author codepeople

    (@codepeople)

    9 years, 3 months ago

    Hello,

    I’m sorry, but the current tags structure used in the plugin does not allow that CSS rule. For the current version of the pluin I propose you an alternative. Insert a “HTML Content” field in the form with the following piece of code as its content:

    <script>
jQuery(document).on('change','#fbuilder :checkbox', function(){
var status = (this.checked) ? 'bold' : 'normal';
jQuery(this).closest('label').css('font-weight', status);
});
</script>

    Best regards.

    Thread Starter PODxt

    (@podxt)

    9 years, 3 months ago

    Thanks we’re almost there but this is not the exact equivalent because when I toggle on and off a radio button, its label stays bold whether it’s on or off.

    Is there also a way to set the following CSS rules for the .side_by_side class when a radio button is selected?

    background-color:#000;
padding: 12px 1px;
margin: 15px 12px 12px 0;
color:#fff
    • This reply was modified 9 years, 3 months ago by PODxt.
    Plugin Author codepeople

    (@codepeople)

    9 years, 3 months ago

    Hello,

    Could you send me the link to the webpage where was inserted the form with the piece of code I sent you in the previous ticket, please?

    Best regards.

    Thread Starter PODxt

    (@podxt)

    9 years, 3 months ago

    Hi, thanks. Here it is: http://kimla.byethost32.com/form-test/

    Plugin Author codepeople

    (@codepeople)

    9 years, 3 months ago

    Hello,

    Please, simply replace the previous piece of code with the following one:

    jQuery(document).on('change','#fbuilder :radio', function(){
	jQuery('#fbuilder :radio:not(:checked)').closest('label').css('font-weight', 'normal');
	jQuery('#fbuilder :radio:checked').closest('label').css('font-weight', 'bold');	
});

    Best regards.

    Thread Starter PODxt

    (@podxt)

    9 years, 3 months ago

    Thanks a lot for checking that out! How could I integrate these CSS rules with JQuery when a radio is selected?

    background-color:#000;
padding: 12px 1px;
margin: 15px 12px 12px 0;
color:#fff
    Plugin Author codepeople

    (@codepeople)

    9 years, 3 months ago

    Hello,

    The simpler solution would be insert the following piece of code into the content of the “HTML Content” field:

    <style>
.my-class{
background-color:#000;
padding: 12px 1px;
margin: 15px 12px 12px 0;
color:#fff;
font-weight:bold;
}
</style>
<script>
jQuery(document).on('change','#fbuilder :radio', function(){
jQuery('#fbuilder :radio:not(:checked)').closest('label').removeClass('my-class');
jQuery('#fbuilder :radio:checked').closest('label').addClass('my-class');	
});
</script>

    Best regards.

    Thread Starter PODxt

    (@podxt)

    9 years, 3 months ago

    Working well, thank you

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Using CSS :checked for styling labels’ is closed to new replies.