Pure CSS to implement iOS style open and close selection box function
|
1 Effect
Demo address: https://www.albertyy.com/2020/7/check2.html Another article: https://www.jb51.net/css/735639.html 2 Knowledge Points 2.1 <label> tag In HTML, the <label> tag is usually used together with the <input> tag. The <label> tag defines a label (marker) for the input element. The label element does not present any special effects to the user. The purpose of the <label> tag is to improve usability for mouse users. When the user clicks the content in the <label> tag, the browser automatically shifts the focus to the control associated with the label. The <label> tag is often used on radio buttons and check buttons. After using this tag, you can also select the corresponding radio button or check button by clicking the content in the label tag. <label> tag syntax format: <label for="Associated control id" form="List of form ids">Text content</label> The id of the associated control generally refers to the id of the input element. In HTML5, a new attribute form is added. The form attribute is used to specify the id list of one or more forms to which it belongs, separated by spaces. When the <label> tag is not in the form tag <form>, the form attribute needs to be used to specify the form to which it belongs. There are no special styling considerations for the <label> element - structurally, a <label> is a simple inline element, so styles can be applied in much the same way as a <span> or <a> element. 2.2 CSS float property The float property specifies whether a box (element) should float. Property value:
How elements float: The element floats horizontally, that is, the element can only move left and right but not up and down. A floated element moves as far left or right as possible until its outer edge hits the border of the containing box or another floated box. Elements following the floated element will wrap around it. Elements before the floated element will not be affected. Clear floats - Use clear: After an element is floated, the surrounding elements will be rearranged. To avoid this, use the clear property. The clear property specifies that floating elements cannot appear on either side of an element.
2.3 CSS3 :checked selector The :checked selector matches every input element that is checked (only applies to radio buttons or checkboxes). 2.4 CSS element+element selector The element+element selector is used to select the element that immediately follows (not inside) the first element specified. For example: select all <p> elements that are immediately after a <div> element:
div+p{ background-color:yellow; }3 Code Implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.Switch {
padding: 0;
width: 500px;
margin: auto;
}
.Switch li {
clear: both;
line-height: 44px;
border-bottom: 1px solid #CCC;
list-style: none;
}
.Switch input {
display: none
}
.Switch label {
width: 52px;
background: #CCC;
height: 28px;
border-radius: 14px;
float: right;
margin: 8px 10px 0 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
cursor: pointer;
}
.Switch label em {
width: 26px;
height: 26px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0, 0, 0, .1);
background: #FFF;
}
.Switch input:checked+label {
background: #a4d714;
}
.Switch input:checked+label em {
float: right;
}
.Switch input:disabled+label {
opacity: 0.5
}
</style>
</head>
<body>
<ul class="Switch">
<li>
<input type="checkbox" name="Storage" id="date">
Close by default <label for="date"><em></em></label>
</li>
<li>
<input type="checkbox" name="Storage2" id="blance" checked="">
By default, <label for="blance"><em></em></label> is turned on
</li>
<li>
<input type="checkbox" name="Storage2" id="integral" disabled="">
Not available <label for="integral"><em></em></label>
</li>
</ul>
</body>
</html>This is the end of this article about how to implement iOS style open and close selection box with pure CSS. For more relevant css ios open and close selection box content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: JS practical object-oriented snake game example
>>: Does Mysql ALTER TABLE lock the table when adding fields?
Recommend
js object to achieve data paging effect
This article example shares the specific code of ...
Getting Started: A brief introduction to HTML's basic tags and attributes
HTML is made up of tags and attributes, which are...
Docker realizes the connection with the same IP network segment
Recently, I solved the problem of Docker and the ...
How to implement the King of Glory matching personnel loading page with CSS3
Those who have played King of Glory should be fam...
CSS style writing order and naming conventions and precautions
The significance of writing order Reduce browser ...
HTML background color gradient effect achieved through CSS style
Effect screenshots: Implementation code: Copy code...
Pure CSS drop-down menu
Achieve results Implementation Code html <div ...
How to purchase and initially build a server
I haven't worked with servers for a while. No...
Vue realizes the card flip effect
This article example shares the specific code of ...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
Nginx rtmp module compilation arm version problem
Table of contents 1. Preparation: 2. Source code ...
MySQL 8.0 error The server requested authentication method unknown to the client solution
After installing the latest version 8.0.11 of mys...
Difference between HTML4 and HTML5: How to add focus implementation code to an input
html4: Copy code The code is as follows: <form...
VMware15.5 installation Ubuntu20.04 graphic tutorial
1. Preparation before installation 1. Download th...
Implementation of TypeScript in React project
Table of contents 1. Introduction 2. Usage Statel...