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

最新推荐文章于 2024-11-22 11:01:09 发布

原创最新推荐文章于 2024-11-22 11:01:09 发布 · 671 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

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

6 篇文章

订阅专栏

css

4 篇文章

订阅专栏

文章展示了如何使用HTML和CSS来实现输入框(input)的自定义样式，特别是如何为checkbox类型设置正常状态和选中状态的图标。通过修改input的样式，包括去除默认样式、设定背景图片及切换选中时的背景图片，可以实现不依赖默认样式的复选框效果。

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;
}