复选框美化

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:923篇文章
  • 发布时间:2023年06月24日 11:09:40
  • 所属分类:CSS, CSS3, html
  • 阅读次数:227次阅读
  • 标签:
<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8">
    <title>复选框美化(Modal)</title>
    <style>
   .check-wrap { position: relative; display: inline-block; vertical-align: middle; height: 24px; padding-left: 13px; line-height: 24px; font-size: 16px;color:#444444;}
.check-wrap~.check-wrap{
    margin-left: 10px;
}
.check-wrap > .icheck { opacity: 0; }
.check-wrap > .ilabel { border-radius: 3px; cursor: pointer; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.check-wrap > .ilabel:after {content: " ";border: 1px solid #999;display: block;font-weight: bold;text-align: center;border-radius: 3px;width: 22px;height: 22px;line-height: 22px;}
.check-wrap > .icheck:checked + .ilabel:after {content: "✓";border-color: #999;background-color: #fff;color: #3ad045;}
.check-wrap > .icheck:indeterminate + .ilabel:after { content: "■"; color: #3f51b5; background-color: #FFF; border-color: #3f51b5; }
    </style>
</head>
 
<body>
    <div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox1" name="check" value="1" checked/>
    <label for="checkbox1" class="ilabel"></label>文字1
</div>
<div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox2" name="check" value="2"/>
    <label for="checkbox2" class="ilabel"></label>文字2
</div>
<div class="check-wrap">
    <input type="checkbox" class="icheck" id="checkbox3" name="check" value="3"/>
    <label for="checkbox3" class="ilabel"></label>文字3
</div>
</body>
 
</html>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 固定链接:恒富网 » 《复选框美化》
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!