input自定义图标及其选中图标

最新推荐文章于 2025-02-15 00:23:42 发布

IChenSY

最新推荐文章于 2025-02-15 00:23:42 发布

阅读量629

点赞数

分类专栏：前端开发常遇问题 css 文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/iYNing/article/details/128952003

版权

前端开发常遇问题同时被 2 个专栏收录

6 篇文章

订阅专栏

css

4 篇文章

订阅专栏

input自定义图标及其选中图标

如下图：想要不使用input标签的默认样式；此时需要准备两张正常、选中的图片。
在这里插入图片描述

代码如下：

//HTML结构
<div className="login-agreement">
	<input className="login-agreement-input" type="checkbox" defaultChecked id="agreement" />
	<label className="login-agreement-label" htmlFor="agreement">同意《用户服务协议》和《隐私政策》</label>
</div>
//CSS样式
input {
	-webkit-appearance: none;
	margin: 0;
    width: .3733rem;
    height: .3733rem;
    padding: 0;
    background: url('../../assest/2x/checkNormal.png') no-repeat center center;
    background-size: .3733rem .3733rem;
    outline: none;
}

 input:checked {
	background: url('../../assest/2x/checkSelect.png') no-repeat center center;
	background-size: .3733rem .3733rem;
}