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
How to implement responsiveness in Vue source code learning
Table of contents Preface 1. Key Elements of a Re...
MySQL series of experience summary and analysis tutorials on NUll values
Table of contents 1. Test Data 2. The inconvenien...
Why the disk space is not released after deleting data in MySQL
Table of contents Problem Description Solution Pr...
Solution to the error "Disk sda contains BIOS RAID metadata" when installing CentOS 6.x
Today, when I was installing CentOS6.2, I couldn&...
Sharing the structure and expression principles of simple web page layout
Introduction to structure and performance HTML st...
VUE + OPENLAYERS achieves real-time positioning function
Table of contents Preface 1. Define label style 2...
js to achieve a simple carousel effect
This article shares the specific code of js to ac...
Getting Started with CSS3 Animation in 10 Minutes
Introduction Animation allows you to easily imple...
Examples of correct judgment methods for data types in JS
Table of contents Preface Can typeof correctly de...
Detailed steps to install RabbitMQ in docker
Table of contents 1. Find the mirror 2. Download ...
Fixed table width table-layout: fixed
In order to make the table fill the screen (the re...
Web Design Tutorial (2): On Imitation and Plagiarism
<br />In the previous article, I introduced ...
Detailed explanation of the code for querying data of a certain day, month, or year in MySQL
today select * from table name where to_days(time...
JavaScript imitates Jingdong magnifying glass effect
This article shares the specific code for JavaScr...
Take you to understand the event scheduler EVENT in MySQL
The event scheduler in MySQL, EVENT, is also call...