Title: CSS: Toggle Switch Background Color
Last modified: February 21, 2019

---

# CSS: Toggle Switch Background Color

 *  Resolved [lem1298](https://wordpress.org/support/users/lem1298/)
 * (@lem1298)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/css-toggle-switch-background-color/)
 * **EDIT: Found the solution [below](https://wordpress.org/support/topic/css-toggle-switch-background-color/#post-11231125).**
 * Hi there,
 * I am trying to change the background color of the toggle-switch button. I found
   two lines in the Caldera CSS, where the background color to the switch get’s 
   assigned. I copied those lines in my Child Theme CSS and changed the Color Values,
   but it still shows the buttons in the default green color…
 *     ```
       .cf-toggle-switch .btn-success{
       	background-color:#MY-COLOR-HERE;
       	border-color:#MY-COLOR-HERE;	
       }
   
       .cf-toggle-switch .btn-success.active,.cf-toggle-switch .btn-success:active,.cf-toggle-switch .open .dropdown-toggle.btn-success{background-image:none}.cf-toggle-switch .btn-success.disabled,.cf-toggle-switch .btn-success.disabled.active,.cf-toggle-switch .btn-success.disabled:active,.cf-toggle-switch .btn-success.disabled:focus,.cf-toggle-switch .btn-success.disabled:hover,.cf-toggle-switch .btn-success[disabled],.cf-toggle-switch .btn-success[disabled].active,.cf-toggle-switch .btn-success[disabled]:active,.cf-toggle-switch .btn-success[disabled]:focus,.cf-toggle-switch .btn-success[disabled]:hover,.cf-toggle-switch fieldset[disabled] .btn-success,.cf-toggle-switch fieldset[disabled] .btn-success.active,.cf-toggle-switch fieldset[disabled] .btn-success:active,.cf-toggle-switch fieldset[disabled] .btn-success:focus,.cf-toggle-switch fieldset[disabled] .btn-success:hover{
       	background-color:#MY-COLOR-HERE;
       	border-color:#MY-COLOR-HERE;
       	}
       ```
   
 * Does anyone have a CSS-Snipped, which changes the toggle switch background color?
 * Thank you very much in advance!
    -  This topic was modified 7 years, 4 months ago by [lem1298](https://wordpress.org/support/users/lem1298/).
    -  This topic was modified 7 years, 4 months ago by [lem1298](https://wordpress.org/support/users/lem1298/).

Viewing 1 replies (of 1 total)

 *  Thread Starter [lem1298](https://wordpress.org/support/users/lem1298/)
 * (@lem1298)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/css-toggle-switch-background-color/#post-11231125)
 * **SOLUTION**
 * All I needed was a “!important” at the end of the line. Now everything works 
   with this tiny bit of code. Maybe this helps someone else…
 *     ```
       .cf-toggle-switch .btn-success {
   
           color: #fff;
           background-color: #5D70B5 !important;
           border-color: #5D70B5 !important;
   
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘CSS: Toggle Switch Background Color’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/caldera-forms_475846.svg)
 * [Caldera Forms - More Than Contact Forms](https://wordpress.org/plugins/caldera-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/caldera-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/caldera-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/caldera-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/caldera-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/caldera-forms/reviews/)

 * 1 reply
 * 1 participant
 * Last reply from: [lem1298](https://wordpress.org/support/users/lem1298/)
 * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/css-toggle-switch-background-color/#post-11231125)
 * Status: resolved