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:

value	describe
left	Floats the element left.
right	Floats the element to the right.
none	default value. The element does not float and will appear where it appears in the text.
inherit	Specifies that the value of the float property should be inherited from the parent element.

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.

NOTE: Absolutely positioned elements ignore the float property!

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?