Open In App

How to change the “checked” background color of toggle switch in Bootstrap 4?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a popular choice among web developers for building interactive webpage designs. Bootstrap has come along a long way with multiple releases and enriched content with every new release. Bootstrap has a wide community that has also contributed newer packages that have made working with Bootstrap easier. In this article, we shall deal with changing the background color of the toggle switch in Bootstrap 4. Bootstrap 4 provides a custom-switch class by default which is used to create toggle switch and the custom-control-input class deals with the background color and border color of the switch. In Bootstrap 4, the background color of the toggle switch is blue. This color can be changed by manipulating the custom-control-input class. There is another method to change the color using external libraries with a wide range of color classes. We shall discuss both the methods in the examples below.

First Approach

This approach creates the toggle switch using the predefined custom-switch class and the color is altered by specifying the required color in the custom-control-input classes. This method includes a great deal of coding as one must repeat the entire code for a different color. This makes it cumbersome.

Code Implementation




<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" 
              type="text/css" 
              href=
        <style>
            .custom-control-input:focus ~ 
          .custom-control-label::before {
                /* when the button is toggled off 
  it is still in focus and a violet border will appear */
                border-color: violet !important;
                /* box shadow is blue by default
  but we do not want any shadow hence we have set 
  all the values as 0 */
                box-shadow:
                  0 0 0 0rem rgba(0, 0, 0, 0) !important;
            }
  
            /*sets the background color of
          switch to violet when it is checked*/
            .custom-control-input:checked ~ 
          .custom-control-label::before {
                border-color: violet !important;
                background-color: violet !important;
            }
  
            /*sets the background color of
          switch to violet when it is active*/
            .custom-control-input:active ~ 
          .custom-control-label::before {
                background-color: violet !important;
                border-color: violet !important;
            }
  
            /*sets the border color of switch
          to violet when it is not checked*/
            .custom-control-input:focus:
          not(:checked) ~ .custom-control-label::before {
                border-color: violet !important;
            }
        </style>
    </head>
    <body>
        <!--main container which contains
 the web elements-->
        <div class="container mt-5">
            <div class="custom-control custom-switch">
                <input type="checkbox" 
                       class="custom-control-input" 
                       id="customSwitch1" />
                <label class="custom-control-label"
                       for="customSwitch1">
                  Toggle this switch</label>
            </div>
        </div>
    </body>
</html>


Output

Second Approach

The second method eliminates the extra efforts required in the first method to specify the color changes for each and every custom-control-input class. This is a better and sophisticated approach as it does not include lengthy coding. The method makes use of the Bootstrap Switch Button package available on Github. It is an open-source library and works with all Bootstrap 4 components. This library has predefined classes that help us define a color for the toggle switch. The data-onstyle attribute of the input tag is responsible for setting the toggle switch color. The color options available are similar to Buttons in Bootstrap 4. The data-toggle attribute specifies that the checkbox is a switch button and the data-width attribute specifies the width of the toggle switch. The checked attribute denotes that when the page loads the switch is already checked and can be unchecked as per requirement.

Code implementation




<!DOCTYPE html>
<html>
    <head>
        <title>Toggle switch</title>
        <!--import Bootstrap Switch 
       Button package using cdn-->
        <link href=
              rel="stylesheet" />
        <!--import Bootstrap 4 using cdn-->
        <link rel="stylesheet" type="text/css"
              href=
    </head>
    <body>
        <!--main container which contains the web elements-->
        <div class="container mt-5">
            <input type="checkbox" 
                   data-toggle="switchbutton"
                   checked data-width="100" 
                   data-onstyle="primary" />
            <input type="checkbox" 
                   data-toggle="switchbutton" 
                   checked data-width="100" 
                   data-onstyle="secondary" /><br />
            <br />
            <input type="checkbox" 
                   data-toggle="switchbutton" 
                   checked data-width="100" 
                   data-onstyle="success" />
            <input type="checkbox" 
                   data-toggle="switchbutton" 
                   checked data-width="100"
                   data-onstyle="danger" /><br />
            <br />
            <input type="checkbox"
                   data-toggle="switchbutton"
                   checked data-width="100" 
                   data-onstyle="warning" />
            <input type="checkbox" 
                   data-toggle="switchbutton"
                   checked data-width="100"
                   data-onstyle="info" /><br />
            <br />
            <input type="checkbox"
                   data-toggle="switchbutton" 
                   checked data-width="100" 
                   data-onstyle="light" />
            <input type="checkbox" 
                   data-toggle="switchbutton" 
                   checked data-width="100" 
                   data-onstyle="dark" />
        </div>
  
        <!--javascript cdn-->
        <script src=
      </script>
    </body>
</html>


Output



Last Updated : 28 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads