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:;
z-index:;
}

JS

用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)"
}
} })()

input选择框默认样式修改的更多相关文章

  1. input时间表单默认样式修改(input[type="date"])

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  2. CSS-复选框默认样式修改

    在css文件中添加如下代码 input[type='checkbox'] { -webkit-appearance: none; background: #fff url('../../static/ ...

  3. H5中input[type="date"]默认样式修改 伪类

  4. input选择框样式修改与自定义

    html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...

  5. 【转】html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...

  6. html5中如何去掉input type date默认样式

    html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...

  7. input 选择框改变背景小技巧

    最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...

  8. 去除select下拉框默认样式

    去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选 ...

  9. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

随机推荐

  1. python-day10(正式学习)

    目录 字符编码 计算机基础 文本编辑器存取文件的原理 python解释器执行py文件的原理 python解释器与文本编辑的异同 字符编码介绍 字符编码的分类 乱码分析 总结 文件操作 三种基本操作 文 ...

  2. Encryption (hard) CodeForces - 958C3 (树状数组)

    大意: 给定序列$a$, 要求将$a$分成$k$个非空区间, 使得区间和模$p$的和最小, 要求输出最小值. $k$和$p$比较小, 直接暴力$dp$, 时间复杂度是$O(nklogp)$, 空间是$ ...

  3. Thinkphp5.0上传图片与运行python脚本

    这里只体现了php可以通过批处理文件调用python脚本的效果 控制器代码 访问路径为127.0.0.1/index/index/upload. index模块,index控制器,upload方法. ...

  4. pc端和移动端的“窗口”(viewport)故事(part1)

    A tale of two viewports - part one 在以下的系列文章中,我将为大家解释浏览器中的视窗和一些重要的元素的尺寸是如何起作用的,如:大家最熟悉的html元素以及window ...

  5. 搭建springCloud网关zuul

    一.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  6. [转载]C++二维动态数组memset()函数初始化

    来源:https://blog.csdn.net/longhopefor/article/details/20994919 先说说memset函数: void *memset(void *s,int ...

  7. java在遍历列表的时候删除列表中某个元素

    在遍历list的时候需要删除其中的某些元素,不要用foreach遍历,需要用Iterator. List<String> list = new ArrayList<String> ...

  8. Linux umask 档案预设权限/touch 建立空档案或修档案件时间

    1 建立档案时,权限一般设为-rw-r--r-- 2 建立目录时,权限一般设为drwxr-xr-x 3 touch 选项与参数 -a :  仅修订access time -c :仅修改档案的时间,若该 ...

  9. 牛客小白月赛12 J 月月查华华的手机 (序列自动机模板题)

    链接:https://ac.nowcoder.com/acm/contest/392/J 来源:牛客网 题目描述 月月和华华一起去吃饭了.期间华华有事出去了一会儿,没有带手机.月月出于人类最单纯的好奇 ...

  10. .htaccess防盗链方法(文件、图片)

    http标准协议中有专门的字段记录referer,一来可以追溯上一个入站地址是什么,二来对于资源文件,可以跟踪到包含显示他的网页地址是什么. 因此所有防盗链方法都是基于这个Referer字段两种方法: ...