html toggle按钮,html - How to add the text "ON" and "OFF" to toggle button - Stack Overflow

.switch

{

width: 50px;

height: 30px;

position: relative;

display:inline-block;

}

.switch input

{

display: none;

}

.slider

{

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

cursor: pointer;

background-color: gray;

border-radius: 30px;

}

.slider:before

{

position: absolute;

background-color: #fff;

height: 20px;

width: 20px;

content: "";

left: 5px;

bottom: 5px;

border-radius: 50%;

transition: ease-in-out .5s;

}

.slider:after

{

content: "Off";

color: white;

display: block;

position: absolute;

transform: translate(-50%,-50%);

top: 50%;

left: 70%;

transition: all .5s;

font-size: 10px;

font-family: Verdana,sans-serif;

}

input:checked + .slider:after

{

transition: all .5s;

left: 30%;

content: "On"

}

input:checked + .slider

{

background-color: blue;

}

input:checked + .slider:before

{

transform: translateX(20px);

}

**The HTML CODE**

If You want to add long text like activate or Deactivate

just make few changes

.switch

{

width:90px

}

.slider:after

{

left: 60%; //as you want in percenatge

}

input:checked + .slider:after

{

left:40%; //exactly opposite of .slider:after

}

and last

input:checked + .slider:before

{

transform: translateX(60px); //as per your choice but 60px is perfect

}

content as per your choice where you have witten "On" and "Off"