饥人谷Wiki

站点工具

用户工具

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
后一修订版 两侧同时换到之后的修订记录
前端基础_css_伪类与伪元素.md [2021/09/23 12:06]
若愚 		前端基础_css_伪类与伪元素.md [2021/09/23 12:11]
若愚 [应用-自定义checkbox]
行 179: 行 179:
 ### 应用-自定义checkbox ### 应用-自定义checkbox
  
-点击笑脸切换: <input type="checkbox"> [代码](http://js.jirengu.com/bazi/1/edit?html,output) +把checkbox做成笑脸切换: [代码](http://js.jirengu.com/bazi/edit?html,output)
-<style> +
-input[type=checkbox]{ +
-  -webkit-appearance: none; +
-  appearance: none; +
-  background: url(http://cdn.jscode.me/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat; +
-  display: inline-block; +
-  width: 20px; +
-  height: 20px; +
-  background-size: contain; +
-  vertical-align: middle; +
-  outline: none; +
-} +
-input[type=checkbox]:checked{ +
-  -webkit-appearance: none; +
-  appearance: none; +
-  background: url(http://cdn.jscode.me/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat; +
-  display: inline-block; +
-  width: 20px; +
-  height: 20px; +
-  background-size: contain; +
-  vertical-align: middle;      +
-} +
- +
-</style>+
  
 ``` ```
-今天的心情: <input type="checkbox"> 
 <style> <style>
 input[type=checkbox]{ input[type=checkbox]{
行 231: 行 206:
  
 </style> </style>
 +
 ``` ```
  
 ### 字体图标 ### 字体图标
 +
 +```
 <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css"> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_nyta5x5h650cnmi.css">
 <span class="iconfont icon-jirengulogojichu2"></span> <span class="iconfont icon-jirengulogojichu2"></span>
行 242: 行 220:
 } }
 </style> </style>
- 
 ``` ```
-<link rel="stylesheet" type="text/css" href="http//at.alicdn.com/t/font_nyta5x5h650cnmi.css"> + 
-<span class="iconfont icon-jirengulogojichu2"></span> [代码](http://js.jirengu.com/bazi/1/edit?html,output) +[字体图标代码](http://js.jirengu.com/qani/1/edit?html,output)
-``` +
-[代码](http://js.jirengu.com/qani/1/edit?html,output)+
  
 [参考文章-前端学习指南-字体图标](https://zhuanlan.zhihu.com/p/22724856?refer=study-fe)  [参考文章-前端学习指南-字体图标](https://zhuanlan.zhihu.com/p/22724856?refer=study-fe) 
 +
 ## 参考 ## 参考
 - [W3C - Pseudo-elements and pseudo-classes](https://www.w3.org/TR/CSS2/selector.html#pseudo-elements) - [W3C - Pseudo-elements and pseudo-classes](https://www.w3.org/TR/CSS2/selector.html#pseudo-elements)
-- [W3C - Pseudo-elements and pseudo-classes 翻译版](http://www.ayqy.net/doc/css2-1/selector.html#pseudo-elements)+- [W3C - Pseudo-elements and pseudo-classes 翻译版](http://www.ayqy.net/doc/css2-1/selector.html#pseudo-element 
 +s)
若愚 · 2021/09/23 12:12 · 前端基础_css_伪类与伪元素.md.txt
公众号 | 前端交流群 | 饥人谷版权所有 | 购买课程

页面工具