input单选框和复选框改变颜色和背景色

在项目中会写页面会遇到UI设计师的主题色, 比如我这边的主题色是橙色, 然后涉及到单选多选的时候, 这些边框也得改变, 换成UI的主题色, 但是有一些标签就很复杂, 是浏览器规定死了, 开发权限并不能操作他们, 哪怕设置appearance属性也没用, 比如单选啊, 多选, 还有深恶痛绝的原生selectoption标签, 看一回吐一回

然后我去网上找, 全是input框下面接一个label标签, 吐了啊, 不是说不好, 这也是一种解决的方法, 但我肯定不能按照他们的方法来, 因为我的是前后端不分离的项目, 而且很多效果和接口都对接了, 按照他们的我这边得大改, 所以就根据他们的思路, 自己写了一个, 既然他们都是通过伪类, 我为什么不直接通过伪类去覆盖呢?

跟着这个思路, 如下

  • 更改单选框
    直接上代码, 通过对伪类的beforeaffter, 去覆盖原来的属性, 然后去定位, 移动到你想要的值
    线上效果图片
    单选框样式未选中和已选中对比图.png



    
    
    
    Document
    


    
  • 下面是复选框
    先上效果图


    复选框未选中和已选中样式修改.png

    后面是代码




    
    
    
    Document
    


    

修改的就到这里啦, 如果对你有帮助, 就动动你的小手, 帮忙点个赞哦, 有支持才有动力, 以后有什么需要帮助的, 可以在下面留言哦, 如需转载, 请注明出处.

你可能感兴趣的:(input单选框和复选框改变颜色和背景色)