Home > Article > Web Front-end > How to create a toggle using HTML and CSS?

How to create a toggle using HTML and CSS?

WBOYforward: 2023-08-25 18:02:091568browse

如何使用 HTML 和 CSS 创建切换开关？

In HTML and CSS, a toggle switch is a graphical user interface element that allows the user to switch between two states (usually "on" and " Switch between "Off"). Toggle switches are created by using an HTML input element of type "checkbox" and a corresponding label element with CSS styling. The label element is styled to display an "on" state when the input is selected and to display an "off" state when the input is not selected.

If we want to add cool interactive features to our website, toggles are a good choice. Here, we’ll explore how to create a toggle using HTML and CSS.

The first step in creating a toggle switch is to create the basic structure of the switch using HTML. We can achieve this by using a div element as a container and adding two input elements to represent the on/off state of the switch.

HTML code

This is a piece of HTML code.

<html>
   <body>
      <h3>Toggle Switch Example</h3>
      <div class="toggle">
         <input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
         <label for="toggle-checkbox" class="toggle-label"></label>
      </div>
   </body>
</html>

Now, we need to style the toggle switch using CSS. Start by setting the display property of the container div to "inline-block" and set the width and height of the switch to a size appropriate for your website or application. We also use the border-radius property to create a circular shape for the switch.

We will add a pseudo-element to the label element and set its content to an empty string. We're also going to give it a background color and position it absolutely inside the container. With the checkbox selected, we move the pseudo-element to the right to show the on state of the toggle switch.

By using the :checked selector in CSS, we can change the position of the white background color when the switch is turned on, creating a smooth and visually appealing transition. We can also customize the appearance of the switch using other CSS properties such as background color, font size, and text alignment.

CSS code

Here is the CSS code.

<style>
   body{
      text-align:center;
   }
   .toggle {
      display: inline-block;
      width: 80px;
      height: 38px;
      background-color: #8eeb60;
      border-radius: 40px;
      position: relative;
      overflow: hidden;
   }
   .toggle input[type="checkbox"] {
      display: none;
   }
   .toggle-label {
      display: block;
      overflow: hidden;
      cursor: pointer;
      border-radius: 34px;
   }
   .toggle-label:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: red;
      border-radius: 34px;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.25s ease-in-out;
   }
   .toggle-checkbox:checked+.toggle-label:before {
      transform: translateX(35px);
   }
</style>

Example 1

The following is an example of creating a toggle using HTML and CSS.

<html>
<head>
    <style>
    body{
        text-align:center;
    }
    .toggle {
        display: inline-block;
        width: 80px;
        height: 38px;
        background-color: #8eeb60;
        border-radius: 40px;
        position: relative;
        overflow: hidden;
    }
    .toggle input[type="checkbox"] {
        display: none;
    }
    .toggle-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border-radius: 34px;
    }
    .toggle-label:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: red;
        border-radius: 34px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.25s ease-in-out;
    }
    .toggle-checkbox:checked+.toggle-label:before {
        transform: translateX(35px);
    }
    </style>
</head>
<body>
    <h3>Toggle Switch Example</h3>
    <div class="toggle">
        <input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
        <label for="toggle-checkbox" class="toggle-label"></label>
    </div>
</body>
</html>

Example 2

This is another example of creating a toggle with the help of HTML and CSS.

<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .toggle {
         position: relative;
         display: block;
         width: 100px;
         height: 40px;
         padding: 3px;
         margin: auto;
         border-radius: 50px;
         cursor: pointer;
      }
      .toggle-input {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
      }
      .toggle-label {
         position: relative;
         display: block;
         height: inherit;
         font-size: 12px;
         background: red;
         border-radius: inherit;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 3px
         rgba(0, 0, 0, 0.15);
      }
      .toggle-label:before,
      .toggle-label:after {
         position: absolute;
         top: 50%;
         color: black;
         margin-top: -.5em;
         line-height: 1;
      }
      .toggle-label:before {
         content: attr(data-off);
         right: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(255, 255, 255, 0.5);
      }
      .toggle-label:after {
         content: attr(data-on);
         left: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(0, 0, 0, 0.2);
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label {
         background: green;
      }
      .toggle-input:checked~.toggle-label:before {
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label:after {
         opacity: 1;
      }
      .toggle-handle {
         position: absolute;
         top: 4px;
         left: 4px;
         width: 38px;
         height: 38px;
         background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
         border-radius: 50%;
      }
      .toggle-handle:before {
         position: absolute;
         top: 50%;
         left: 50%;
         margin: -6px 0 0 -6px;
         width: 16px;
         height: 16px;
      }
      .toggle-input:checked~.toggle-handle {
         left: 64px;
         box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
      }

      /* Transition*/
      .toggle-label,
      .toggle-handle {
         transition: All 0.3s ease;
         -webkit-transition: All 0.3s ease;
         -moz-transition: All 0.3s ease;
         -o-transition: All 0.3s ease;
      }
   </style>
</head>
   <body>
      <h3>Toggle Switch by using HTML and CSS</h3>
      <label class="toggle">
         <input class="toggle-input" type="checkbox" />
         <span class="toggle-label" data-off="OFF" data-on="ON"></span>
         <span class="toggle-handle"></span>
      </label>
   </body>
</html>

in conclusion

Creating a toggle using HTML and CSS is a simple process that can add a lot of value to your website or application. By following these steps and experimenting with different CSS properties, we can create a unique, visually appealing, and easy-to-use toggle switch.

The above is the detailed content of How to create a toggle using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Bounce left animation effect using CSSNext article：Bounce left animation effect using CSS

See more