====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
前端基础_css_伪类与伪元素.md [2021/09/23 12:06] 若愚 |
前端基础_css_伪类与伪元素.md [2021/09/23 12:12] (当前版本) 若愚 [字体图标] |
||
---|---|---|---|
行 179: | 行 179: | ||
### 应用-自定义checkbox | ### 应用-自定义checkbox | ||
- | 点击笑脸切换: | + | 把checkbox做成笑脸切换: |
- | < | + | |
- | input[type=checkbox]{ | + | |
- | -webkit-appearance: | + | |
- | appearance: none; | + | |
- | background: url(http:// | + | |
- | display: inline-block; | + | |
- | width: 20px; | + | |
- | height: 20px; | + | |
- | background-size: | + | |
- | vertical-align: | + | |
- | outline: none; | + | |
- | } | + | |
- | input[type=checkbox]: | + | |
- | -webkit-appearance: | + | |
- | appearance: none; | + | |
- | background: url(http:// | + | |
- | display: inline-block; | + | |
- | width: 20px; | + | |
- | height: 20px; | + | |
- | background-size: | + | |
- | vertical-align: | + | |
- | } | + | |
- | + | ||
- | </ | + | |
``` | ``` | ||
- | 今天的心情: | ||
< | < | ||
input[type=checkbox]{ | input[type=checkbox]{ | ||
行 231: | 行 206: | ||
</ | </ | ||
+ | |||
``` | ``` | ||
### 字体图标 | ### 字体图标 | ||
+ | |||
+ | ``` | ||
<link rel=" | <link rel=" | ||
<span class=" | <span class=" | ||
行 242: | 行 220: | ||
} | } | ||
</ | </ | ||
- | |||
``` | ``` | ||
- | <link rel=" | ||
- | <span class=" | ||
- | ``` | ||
- | [代码](http:// | ||
- | [参考文章-前端学习指南-字体图标](https://zhuanlan.zhihu.com/p/22724856?refer=study-fe) | + | [字体图标代码](http://js.jirengu.com/qani/1/edit?html,output) |
+ | |||
+ | |||
## 参考 | ## 参考 | ||
- [W3C - Pseudo-elements and pseudo-classes](https:// | - [W3C - Pseudo-elements and pseudo-classes](https:// | ||
- [W3C - Pseudo-elements and pseudo-classes 翻译版](http:// | - [W3C - Pseudo-elements and pseudo-classes 翻译版](http:// | ||
+ | - [前端学习指南-字体图标](https:// | ||
+ | ) |