Shulou(Shulou.com)06/01 Report--

This article is about how to use CSS to implement toggle buttons. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

HTML

The HTML we need is not something we haven't seen before, that is, a standard checkbox combined with a label. We wrap checkox and label with a div and add a switch style class to the div.

Label styles are located using the input + label selector so that label does not need its own style class name. Now let's take a look at the following HTML structure:

There's nothing special here. For CSS, we want the real checkbox to be hidden from the screen and out of sight. Basically all the styles are added to label. This is convenient because clicking label will actually check / uncheck checkbox. We will implement the toggle switch with the following CSS:

. cmn-toggle {

Position: absolute

Margin-left:-9999px

Visibility: hidden

}

.cmn-toggle + label {

Display: block

Position: relative

Cursor: pointer

Outline: none

User-select: none

}

Style one

At this point, label acts as a container and has width and height. We also set a background color to simulate the boundary of our toggle switch. The before element simulates the light gray area inside the switch (the background color transitions to green when the switch is turned on). The after element is the real circular switch, which is above all else and will slide from left to right when clicked. We will add a box-shadow to the: after element to make it look more stereoscopic. When input accepts the: checked pseudo class, we will smoothly change the background color of the before element and the position of the: after element. CSS is as follows:

Input.cmn-toggle-round + label {

Padding: 2px

Width: 120px

Height: 60px

Background-color: # dddddd

Border-radius: 60px

}

Input.cmn-toggle-round + label:before

Input.cmn-toggle-round + label:after {

Display: block

Position: absolute

Top: 1px

Left: 1px

Bottom: 1px

Content: ""

}

Input.cmn-toggle-round + label:before {

Right: 1px

Background-color: # f1f1f1

Border-radius: 60px

Transition: background 0.4s

}

Input.cmn-toggle-round + label:after {

Width: 58px

Background-color: # fff

Border-radius: 100%

Box-shadow: 0 2px 5px rgba (0,0,0,0.3)

Transition: margin 0.4s

}

Input.cmn-toggle-round:checked + label:before {

Background-color: # 8ce196

}

Input.cmn-toggle-round:checked + label:after {

Margin-left: 60px

}

Style two

The next example is very similar to the above example, the main difference is its appearance. It is in line with the trend of smooth flattening of modern websites, but it is the same as example 1 in terms of function. The following CSS only changes the style of toggle, everything else is the same.

Input.cmn-toggle-round-flat + label {

Padding: 2px

Width: 120px

Height: 60px

Background-color: # dddddd

Border-radius: 60px

Transition: background 0.4s

}

Input.cmn-toggle-round-flat + label:before

Input.cmn-toggle-round-flat + label:after {

Display: block

Position: absolute

Content: ""

}

Input.cmn-toggle-round-flat + label:before {

Top: 2px

Left: 2px

Bottom: 2px

Right: 2px

Background-color: # fff

Border-radius: 60px

Transition: background 0.4s

}

Input.cmn-toggle-round-flat + label:after {

Top: 4px

Left: 4px

Bottom: 4px

Width: 52px

Background-color: # dddddd

Border-radius: 52px

Transition: margin 0.4s, background 0.4s

}

Input.cmn-toggle-round-flat:checked + label {

Background-color: # 8ce196

}

Input.cmn-toggle-round-flat:checked + label:after {

Margin-left: 60px

Background-color: # 8ce196

}

Style three

Now, we're going to do something different. We will create a flip-style switcher switch. The default view is gray and displays "No" (or anything that indicates unchecked content), while the checked view is green and displays "Yes". When you click label, swithcer flips 180 degrees along the Y axis. We will use "data-attributes" to populate the content when unchecked / checked. These "data-attributes" are specified by "data-on" and "data-off" in HTML, and they will be populated into the pseudo elements: after and: before, respectively. Please note: the backface-visiibility attribute in the after pseudo-element, because the starting point is-180 degrees, allows you to hide the content on the back.

Input.cmn-toggle-yes-no + label {

Padding: 2px

Width: 120px

Height: 60px

}

Input.cmn-toggle-yes-no + label:before

Input.cmn-toggle-yes-no + label:after {

Display: block

Position: absolute

Top: 0

Left: 0

Bottom: 0

Right: 0

Color: # fff

Font-family: "Roboto Slab", serif

Font-size: 20px

Text-align: center

Line-height: 60px

}

Input.cmn-toggle-yes-no + label:before {

Background-color: # dddddd

Content: attr (data-off)

Transition: transform 0.5s

Backface-visibility: hidden

}

Input.cmn-toggle-yes-no + label:after {

Background-color: # 8ce196

Content: attr (data-on)

Transition: transform 0.5s

Transform: rotateY (180deg)

Backface-visibility: hidden

}

Input.cmn-toggle-yes-no:checked + label:before {

Transform: rotateY (180deg)

}

Input.cmn-toggle-yes-no:checked + label:after {

Transform: rotateY (0)

}

Browser compatibility

The above browser compatibility requirements are that IE8 and the following browsers do not recognize: checked pseudo-class, so you need to detect the browser, if it is an old IE, then directly back to the original checkbox,css transitions attribute does not support IE9 and the following browsers, but this will only affect the transition part of the switching process, there is no other problem can work properly.

Thank you for reading! This is the end of this article on "how to use CSS to achieve switch buttons". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.