自定义 checkbox， radio 样式

• 深入了解html label标签
• 了解CSS边框、背景、伪元素、伪类（注意和伪元素区分）等属性的设置
• 了解CSS中常见的雪碧图，并能自己制作使用雪碧图

---

Label

The HTML <label> element represents a caption for an item in a user
interface.

label可以帮助添加结构和增加表单的可用性和可访问性，用来在每个表单元素中添加有意义的描述性标签，增加了表单对于使用辅助设备的用户的易用性。

Usage notes

• A <label> can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

• Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they’re associated.

隐式使用
Simple label example

<label>Click me <input type="text"></label>

显示使用
Using the “for” attribute

<label for="username">Click me</label>
<input type="text" id="username">

Attributes： for

html 中 label 的基本知识

---

background-position

Summary

The background-position CSS property sets the initial position for each defined background image, relative to the background position layer defined by background-origin.

Syntax

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple values */
background-position: 0 0, center;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

Formal syntax

<position>#
where 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where 
<length-percentage> = <length> | <percentage>

CodePen for background-position

背景图片定位相关知识

---

:check css 预处理

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

Examples

/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}

/* only radio elements */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none;  
}

/* only option elements */
option:checked {
  color: red;
}

input[type=”radio”]:checked
Represents all radio buttons on the page that are checked

input[type=”checkbox”]:checked
Represents all checkboxes on the page that are checked

option:checked
Represents all select’s options on the page that are selected

了解input的:checked伪类的基本知识以及应用场景

---

::before(:before)

Summary

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.

HTML content

<q>Some quotes</q>, he said, <q>are better than none</q>.

CSS content

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

CodePen for ::before

了解input的:before伪元素的基本知识

---

::after (:after)

Summary

The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

Syntax

/* CSS3 syntax */
::after { style properties }

/* CSS2 syntax */
:after { style properties }

了解input的:after伪元素的基本知识

---

CSS 伪元素 伪类 解析

• CSS 伪类用于向某些选择器添加特殊的效果。
• CSS 伪元素用于将特殊的效果添加到某些选择器。

伪元素和伪类容易混淆，是因为效果类似且写法相仿， css3 为了区分两者，明确规定了两者的表现方法。

:Pseudo-classes
::Pseudo-elements

“伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。”

引用自 StephenLee