漂亮的checkbox

最新推荐文章于 2021-06-03 19:20:40 发布

weixin_30867015

最新推荐文章于 2021-06-03 19:20:40 发布

阅读量146

点赞数

原文链接：http://www.cnblogs.com/wind90/p/4974067.html

版权

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style type="text/css">
  
.checkbox {
    display: none;
}

.label:before {
    display: block;
    content: "";
    margin: 0 .5em 0 0;
    float: left;
    width: 20px;
    height: 20px;
    background-color: green;
    border: 1px solid ;
    -webkit-border-radius: 50%; /* Safari 和 Chrome */   

}
.checkbox:checked + .label:before {
    color: white;
    content: "✓";
}

</style>

<body>
<input id="sample-checkbox" class="checkbox" type="checkbox">
<label class="label" for="sample-checkbox">

Click me

  </label>
</body>
</html>

原文地址：

http://modernweb.com/2014/07/30/5-things-wont-believe-built-css/

转载于:https://www.cnblogs.com/wind90/p/4974067.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30867015

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
漂亮的checkbox

<!DOCTYPE html><html><head> <title></title></head><style type="text/css"> .checkbox { display: none;}.label:before { display...
复制链接

扫一扫