input选择框默认样式修改

最新推荐文章于 2023-08-01 13:13:34 发布

转载最新推荐文章于 2023-08-01 13:13:34 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zimengxiyu/p/9865707.html

本文介绍了一种使用图片替换默认input选择框的方法，通过隐藏原始的checkbox并利用CSS和JavaScript动态更改图片，从而实现对input选择框样式的自定义。这种方法不仅能够提升界面美观度，还能增加用户体验。

input选择框是无法直接修改样式，我们只能间接来改变它样式。

原理：用图片来代替原来的input选择框，原来的input选择框定位到图片上方并让它opacity为0，鼠标点击时用js来改变图片，这样从视觉上就完成了input选择框样式的修改

HTML

<i></i>                
 <input type="checkbox" />
 我已阅读并接受<a href="">《***》</a>

CSS

 i {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background: url(../img/user-xy-false.png) no-repeat;
            background-size: cover;
            vertical-align: sub;
        }
        input {
            position: absolute;
            left: -1.7rem;
            top: -.2rem;
            opacity: 0;
            z-index: 1;
        }

用js来改变背景图片

//用户协议背景图
            !(function(){var icon=document.querySelector(".user-xy i");
                var choice=document.querySelector(".user-xy input");
                choice.onclick=function(){
                    if(choice.checked){
                        icon.style.backgroundImage="url(img/user-xy-true.png)"
                    }else{
                        icon.style.backgroundImage="url(img/user-xy-false.png)"
                    }
                }
                
            })()

转载于:https://www.cnblogs.com/zimengxiyu/p/9865707.html