Title: Using CSS :checked for styling labels
Last modified: February 6, 2017

---

# Using CSS :checked for styling labels

 *  Resolved [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/)
 * 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](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8745795)
 * 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](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8747681)
 * 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](https://wordpress.org/support/users/podxt/).
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8748263)
 * 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](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8812915)
 * Hi, thanks. Here it is: [http://kimla.byethost32.com/form-test/](http://kimla.byethost32.com/form-test/)
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8813316)
 * 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](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8814058)
 * 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](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8814307)
 * 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](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8814676)
 * 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.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [PODxt](https://wordpress.org/support/users/podxt/)
 * Last activity: [9 years, 3 months ago](https://wordpress.org/support/topic/using-css-checked-for-styling-labels/#post-8814676)
 * Status: resolved