博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
美化checkbox
阅读量:5251 次
发布时间:2019-06-14

本文共 987 字,大约阅读时间需要 3 分钟。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>chec</title>
<style>
#container {margin: 20px auto;}
#container span {position: relative;}
#container .input_check {position: absolute;visibility: hidden;}
#container .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #ae8e37;}
#container .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px;
border: 2px solid #ae8e37;border-top-color: transparent;border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);}

</style>

</head>
<body>

<h3></h3>

<div id="container">

<span><input type="checkbox" class="input_check" id="check3"><label for="check3"></label>111</span>
<span><input type="checkbox" class="input_check" id="check4"><label for="check4"></label>222</span>
</div>

</body>

</html>

转载于:https://www.cnblogs.com/ll-taj/p/5221210.html

你可能感兴趣的文章
UX2内核浏览加速技术纲要[带你解决WebView卡顿]
查看>>
训练1-J
查看>>
c语法拾遗-函数参数的传递问题(指针的指针)
查看>>
hdu--2570--迷瘴(贪心)
查看>>
hdoj-1017-A Mathematical Curiosity(格式坑)
查看>>
解决CentOS7 Local time比实际时间相差8小时
查看>>
2018/07/05 html基础
查看>>
学习使用Bing Maps Silverlight Control(七):自定义导航工具栏
查看>>
2015 9月2日 工作计划与执行
查看>>
[转][c#]注册表经验集
查看>>
20145206、20145325、20145326、20145311团队第一周博客
查看>>
第三节 实现页面布局
查看>>
StarUML2 建模工具全平台破解及license验证简要分析
查看>>
App列表之分组ListView
查看>>
javascript数组元素的添加、删除与插入以及参数数组的使用
查看>>
css ie6最小高度问题
查看>>
1、Linux内核的配置和编译
查看>>
A Summaryof JDBC
查看>>
LRTHW笔记七
查看>>
Catch That Cow(BFS广搜)
查看>>