美化 input checkbox 样式，利用图片或者 icon 图标

最新推荐文章于 2023-08-01 11:07:16 发布

追求者2016

最新推荐文章于 2023-08-01 11:07:16 发布

阅读量3.1k

点赞数 1

分类专栏： html 文章标签： html input checkbox

本文链接：https://blog.csdn.net/example440982/article/details/97812287

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

美化 input checkbox 样式，利用图片或者 icon 图标

原理是利用 :checked 状态选择器，替换样式，
默认的 checkbox 效果隐藏在可视区域之外

<div class="input-box">
    <input class="input-check" type="checkbox" />
	<i class="icon icon-checked"></i>
</div>

less 编写的样式，scss, stylus 同样可用 just do it

.input-box {
    position: relative;
    .input-check {
        position: absolute;
        left: -9999em;
    }
    .icon-checked {
        display: inline-block;
        vertical-align: middle;
        font: normal normal normal 14px/1 "weui";
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        .icon-checked:before {
            content: '';
            display: block;
            margin: 0;
            font-size: 23px;
            border: 1px solid rgba(0,0,0,0.3);
        }
        &:checked + .icon-checked:before {
            content: '';
            background: url('imgurl') center no-repeat;
            background-size: 100%;
        }
    }
}

提炼为己所用

 <div class="zui-cells__checkbox">
 <label for="personal">
 	<div class="zui-cell__hd">
 		<input id="personal"
 		       type="radio"
               class="zui-check"
               name="merchantMainType"/>
        <i class="zui-icon-checked"></i>
    </div>
    <div class="zui-cell__bd">
    <p class="right">男</p>
    </div>
</label>
</div>


.zui-check {
  position: absolute;
  left: -9999em;
}

[class^="zui-icon-"],
[class*=" zui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  font: normal normal normal 14px/1 "weui";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

[class^="zui-icon-"]:before,
[class*=" zui-icon-"]:before {
  display: inline-block;
  margin-left: .2em;
  margin-right: .2em;
}

.zui-cells__checkbox {
  .zui-cell__hd {
    padding-left: 8px;
    padding-right: 6px;
  }
  .zui-icon-checked:before {
    content: '';
    display: block;
    font-size: 23px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.3);
  }
  .zui-check:checked+.zui-icon-checked:before {
    content: '';
    background: url(../img/checked.png) center no-repeat;
    background-size: 100%;
    border: 0;
    outline: 0;
  }
}