Title: Css editing
Last modified: July 14, 2022

---

# Css editing

 *  Resolved [fixxit91](https://wordpress.org/support/users/fixxit91/)
 * (@fixxit91)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/)
 * Hello,
 * how can I create a color of class wsf-button only on certain element because 
   when I change Lighter color in the customization it changes me also the color
   of the multi step and other elements.
 * Best Regards.

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

 *  Plugin Author [Mark Westguard](https://wordpress.org/support/users/westguard/)
 * (@westguard)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15825874)
 * Hi [@fixxit91](https://wordpress.org/support/users/fixxit91/)
 * Thanks for your inquiry!
 * You can add your classes to fields and then apply styling to that class selector
   using your own custom CSS.
 * To add a class:
 * 1. Click to edit the field.
    2. In the sidebar, click the ‘Advanced’ tab. 3. 
   Under ‘Classes’ add a class name under ‘Field Wrapper’ or ‘Field’. e.g. my-class-
   name 4. Click ‘Save’.
 * In the custom CSS for your theme, you could then add something like:
 *     ```
       .my-class-name {
           color: #ff0000; 
       }
       ```
   
 * Obviously this is just an example and you could apply whatever CSS properties
   you like to that field.
 * Alternatively if you are familiar with using the browser inspector you could 
   inspect your field, obtain the ID of the field (they are all unique) and then
   apply CSS to that ID too, e.g.
 *     ```
       #wsf-1-field-123 {
           color: #ff0000;
       }
       ```
   
 * Many thanks
 * Mark
 *  Thread Starter [fixxit91](https://wordpress.org/support/users/fixxit91/)
 * (@fixxit91)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15828299)
 * Hello !
 * thanks for all this information ! can you give me an example to change the css
   when the checkboxes are checked ? Just change the background color and the borders.
 * Best Regards.
 *  Plugin Author [Mark Westguard](https://wordpress.org/support/users/westguard/)
 * (@westguard)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15829459)
 * Hi [@fixxit91](https://wordpress.org/support/users/fixxit91/)
 * You could use the :checked pseudo class to handle that. You can learn more about
   it here:
 * [https://developer.mozilla.org/en-US/docs/Web/CSS/:checked](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)
 * An example of styling default checkboxes in WS Form would be:
 *     ```
       input[type=checkbox].wsf-field.my-class-name:checked + label.wsf-label:before {
           background-color: #205493;
           border-color: #205493;
       }
       ```
   
 * I have been quite specific on the selector there to ensure your CSS overrides
   our CSS. Note the my-class-name part which you would change to your class name.
 * Thanks
 * Mark
 *  Thread Starter [fixxit91](https://wordpress.org/support/users/fixxit91/)
 * (@fixxit91)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15875985)
 * Hello,
 * thank you for your answer, I managed to modify all this.
 * I have another problem, I created a form and modified the css of it. I need to
   duplicate the same form several times but I have to redo all the CSS modifications
   for each form, would you have a solution to create a single CSS for each duplicated
   form? I tried many things but it does not work.
 * Best Regards.
 *  Plugin Author [Mark Westguard](https://wordpress.org/support/users/westguard/)
 * (@westguard)
 * [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15877891)
 * Hi [@fixxit91](https://wordpress.org/support/users/fixxit91/)
 * Use CSS classes instead of ID’s for your selectors and then you can use those
   across all your forms even if you clone them.
 * Many thanks
 * Mark

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

The topic ‘Css editing’ is closed to new replies.

 * ![](https://ps.w.org/ws-form/assets/icon-256x256.jpg?rev=2834651)
 * [WS Form LITE - Drag & Drop Contact Form Builder](https://wordpress.org/plugins/ws-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ws-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ws-form/)
 * [Active Topics](https://wordpress.org/support/plugin/ws-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ws-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ws-form/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Mark Westguard](https://wordpress.org/support/users/westguard/)
 * Last activity: [3 years, 10 months ago](https://wordpress.org/support/topic/css-editing-12/#post-15877891)
 * Status: resolved