Home > Developer > Web Develop
This article for Bo Master original, reproduced please indicate the SOURCE.
Switch switches:
The switch switch has only two options, true or false, as Required. So we think of the HTML CheckBox control and use it to do it.
<id= "switch" type= "checkbox" class= "switch" />
however, in the browser, the checkbox has a fixed shape (tick), so we can not directly modify the Checkbox's Style.
So should we change the style of something into a switch? So we think of the label tag, why? Because the label Label's for property can bind the form control, click the label tag, which is the equivalent of the control you clicked on the Binding.
<for = "switch">Test</label>
Nonsense not much to say, directly on the full code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "utf-8" /> <title></title> <Linkrel= "stylesheet"href= "css/test.css" /> </Head> <Body> <Divclass= "container"> <inputID= "switch"type= "checkbox"class= "switch" /> <label for= "switch"onclick= "test ()"></label> </Div> <Script> varTest= function() {console.log (!document.getElementById ('Switch'). checked? "selected" : "not selected"); } </Script> </Body></HTML>
/*the size of the switch*/. Container{Height:15px;width:30px;}/*set checkbox does not display*/. Switch{Display:None;}/*sets the label label to be an oval shape*/label{Display:Block;Background-color:#EEEEEE;Height:100%;width:100%;cursor:Pointer;Border-radius:25px;}/*Add the following style before the label content to form an unchecked state*/Label:before{content:"';Display:Block;Border-radius:25px;Height:100%;width:15px;Background-color: white;Opacity:1;Box-shadow:1px 1px 1px 1px rgba (0, 0, 0, 0.08);-webkit-transition:all 0.2s Ease;}/*Add the following style after the label label content to form a selected state*/Label:after{position:relative;Top:-15px; left:15px;content:"';Display:Block;Border-radius:25px;Height:100%;width:15px;Background-color: white;Opacity:0;Box-shadow:1px 1px 1px 1px rgba (0, 0, 0, 0.08);-webkit-transition:all 0.2s Ease;}/*~ Sibling Selector. P~ul: all UL elements after P element*//*when selected, Select the style display*/#switch: Checked~label:after{Opacity:1;}/*when selected, the style disappears without checking*/#switch: Checked~label:before{Opacity:0;}/*change the background color of a label after it is selected*/#switch: Checked~label{Background-color:Green;}
CSS for a switch switch
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
