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.
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.
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>
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>
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>
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
