Reprinted from: http://www.jianshu.com/p/0e2a67cde03d
Label label
1. concept:
The HTML < label > element represents the title of the project in the user interface.
It usually associates a control, either by placing it in a label element or by using it as an attribute. This control is called labeled for the label element
control
2. usage:
- Usage 1:
<label>Click me <input type="text" id="User" name="Name" /></label> - Usage 2:
<label for="User">Click me</label> <input type="text" id="User" name="Name" />
II. background-position attribute
1. concept:
The background-position attribute is used to specify the initial position of the background image; this initial position is relative to the background-origin defined background location layer.
2. usage:
background-position:[position-x]，[position-y]If only one value is specified, this value will default to the horizontal direction in the background image position, while the default value in the vertical direction is set to 50%. When keywords, percentages and values are mixed, keywords left and right can only be specified in the horizontal direction (the first value) while top and bottom can only be specified in the vertical direction (the second value). Similarly, negative values are allowed to be specified.
3. Pseudo-classes and Pseudo-elements
1. concept:
Pseudo-class: The purpose of existence is to find information that does not exist in the DOM tree and that cannot be obtained by conventional CSS selectors through selectors.
Pseudo-classes have a colon: at the beginning, followed by the name of the pseudo-Class and optional parameters contained in parentheses.
Commonly used pseudoclasses:
active adds styles to the activated elements. Focus adds styles to elements that have keyboard input focus. hover adds styles to elements when the mouse hovers over them. link adds styles to links that are not accessed. visited adds styles to links that have been accessed. first-child adds styles to the first child of an element. checked adds styles to selected control elements
Pseudo-elements: Pseudo-elements create abstract elements in the DOM tree that do not exist in the document language (which can be understood as html source code);
Note: In order to distinguish between pseudo-classes and pseudo-elements, css3 specifies that there is a colon in front of pseudo-classes and two colons in front of pseudo-elements.
Commonly used pseudoelements
:: before is inserted into the dom as the first child of the action element
:: after is inserted into the dom as the last child of the action element2. Distinction and Connection
- Connections: All add styles to elements through selectors
- Difference: Pseudo-elements create an element, but not a real Html element. Pseudo-classes create a class style for an element.
4. The Principle of Custom Controls
Hide native input tags, use label, and add styles to implement custom controls
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>custom checkbox,radio style</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='wrap'>
<h2>Pseudo-element implementation:</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox" class="checkBox">
<label for="checkBox"></label>
</div>
<div class="radio">
<input type="radio" name="sex" id="radioBox" class="radios">
<label for="radioBox"></label>
<input type="radio" name="sex" id="radioBox1" class="radios">
<label for="radioBox1"></label>
</div>
<h2>Sprite Realization:</h2>
<div class="checkbox">
<input type="checkbox" name="" id="checkBox_sprit" class="checkBox_sprit">
<label for="checkBox_sprit"></label>
</div>
<div class="radio">
<input type="radio" name="sex1" id="radioBox_sprit" class=" radioBox_sprit">
<label for="radioBox_sprit"></label>
<input type="radio" name="sex1" id="radioBox1_sprit" class=" radioBox_sprit">
<label for="radioBox1_sprit"></label>
</div>
</div>
</body>
</html>- Implementation of Pseudo-Element Method
Use: checked pseudo class and:: after pseudo element to add pseudo element to label tag when control is selected:
css:
.checkbox{
margin-bottom: 30px;
font-weight: 700;
}
.checkBox+label,.radios+label{
width:16px;
height: 16px;
border:1px solid #d9d9d9;
display: -webkit-flex;
display:flex;
}
.checkBox:checked+label,.radios:checked+label{
border:1px solid #d73d32;
font-weight: 700;
}
.checkBox:checked+label::after,.radios:checked+label::after{
margin: auto;
content: '2714';
color: red;
width:8px;
height:8px;
line-height: 8px;
text-align: center;
font-size: 12px;
}
input{
margin:0;
display: none;
}
/* radio */
.radio{
display: -webkit-flex;
display: flex;
width: 50px;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.radios+label{
border-radius: 50%;
}
.radios:checked+label::after{
border-radius: 50%;
width:8px;
height:8px;
line-height: 8px;
content: ' ';
background: #d73d32;
}- Sprite diagram implementation method:
Add a background image to label and set the background-position property when the state is selected
css:
.checkBox_sprit+label,.radioBox_sprit+label{
width: 16px;
height:16px;
border:none;
display: inline-block;
background:url('bg.png') no-repeat;
}
.checkBox_sprit+label{
background-position:-25px -32px;
}
.radioBox_sprit+label{
background-position: -24px -10px;
}
.checkBox_sprit:checked+label{
background-position: -60px -32px;
}
.radioBox_sprit:checked+label{
background-position: -59px -10px;
}V. Comparison of two methods of css Sprite Map and css Pseudo-Element
- Pseudo elements can be used without pictures, which reduces the number of http receipts and dispatches, and improves network performance.
- The use of css sprite map can make the reductivity more precise and reduce the amount of code.
