checkbox的美化(转)
2024-10-15 01:44:17
http://www.w3cfuns.com/blog-5422889-5398674.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.p_check{position:relative;display:inline-block;width:18px;height:18px;border:2px solid #FF6980;vertical-align:middle;}
.p_check input{opacity:0;}
.p_check input+span{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FF6980;}
.p_check input+span:after{display:inline-block;content:"";margin:4px 0 0 7px;width:4px;height:8px;border:2px solid #FFF;border-left-width:0;border-top-width:0;vertical-align:top;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
.p_check input:checked+span{display:inline-block;}
</style>
</head>
<body>
<p>
<label class="p_check"><input type="checkbox" checked="checked" value="" /><span></span></label>
<a>哈哈哈哈哈哈</a>
</p>
<p>
<label class="p_check"><input type="checkbox" value="" /><span></span></label>
<a>呵呵呵呵呵呵</a>
</p>
</body>
</html>
最新文章
- 【项目】百度搜索广告CTR预估
- tp中使用分页技术
- GitHub团队项目合作流程
- mongodb(二) 安装和使用
- 简述Mesos API–files
- 每一个程序员需要了解的10个Linux命令
- Ubuntu下Qt编译报错“cannot find -lGL”的解决方案
- winform 绘制label 中文字 - 摘
- 排序算法源码（JAVA）
- 让PV10000+的秘诀
- C 猜数游戏
- Outlook2007、2010和Foxmail的簽名設計
- 关于python命令在editor里编写与在interpreter里的编写的不同之处
- LinbDesk --- 新的extjs4.2 desktop demo : 技术交流Q群：336584192
- MySQL--当mysqldump --single-transaction遇到alter table
- Python random模块sample、randint、shuffle、choice随机函数概念和应用
- python各种web框架对比
- Mysql 一些基本的小东西
- goland 中国 caisy qq Czx123456
- Java之数组遍历