checkbook实现任何颜色背景

有些时候需要用到checkbook的其他颜色背景，如果用原生的checkbook会觉得比较没有视觉美感，所以分享一种实现checkbox里面增加任何背景任何图片的点击。先贴上html：

<input type="checkbox" class="agree-confirm agree-content" checked="true" id="agree-check">
复制代码

跟上css：

.agree-confirm{width: 13px;height: 13px;-webkit-appearance: none; background-color: inherit; border:1px solid #18b4ed; border-radius: 3px;}
.agree-confirm:checked:before {display: inline-block;content:url('../images/login/checkicon-small.png');line-height: 14px;top:-2px;right: 2px;color: white;position: absolute;width: 25px;
}
.agree-confirm:checked{background-color: #18b4ed; border: none;}
.agree-content{position: absolute; top: 14px;right: 133px; transition: background-color ease 0.2s;}
.next-step .login-next{height: 44px; border-radius: 7px;}
复制代码

从中可以看出，关键的代码是：-webkit-appearance: none;，这句代码对于移动端绝大部分的浏览器，Android，iOS的移动端浏览器都以webkit为内核兼容，这句代码主要作用就是取消了当前元素的默认样式，我们要实现checkbook的选中状态为其他背景色：所以就跟上了代码： .agree-confirm:checked{background-color: #18b4ed; border: none;}

而要保证被选中之前背景色为透明，则就是用css：background-color: inherit; 跟随父级颜色即可。最后看伪类元素：通过定位，我们可以实现对伪类元素进行背景图片设置，然后就可以实现被选中状态图片显示，仅仅通过css就可以实现交互。

//当我们引进css的时候需要增加版本号，这样就可以避免服务器缓存带来的静态资源没更新的问题。

转载于:https://juejin.im/post/5c91fa6ef265da61035876d8

checkbook实现任何颜色背景相关推荐

visual studio code(vs code)如何更换颜色背景
默认我们的颜色背景都是深黑色的,看久了想换一个,那么怎么换呢? 1.打开设置. 2.右边的3个选项都可以用,为了简单,我们选择第2个选项,原来是dark,我换成了light. 效果如下:
phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转载连接:http://www.cnblogs.com/huangcong/p/3687665.html phpexcel中文教程-设置表格字体颜色背景样式.数据格式.对齐方式.添加图片.批注.文字块 ...
html彩色背景指令,HTML_第四章　颜色背景的ＣＳＳ，本　章　Ｃ　Ｓ　Ｓ　的　主 - phpStudy...
第四章颜色背景的CSS 本章 C S S 的主要作用在前面的章节介绍完了声明与应用的方法及一些特性之後,从这章开始,便要正式进入CSS的指令介绍了!本章有两个介绍的主题,第一个部份介 ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
CSS3新增-属性（长度颜色背景）选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
python3-xlwt-Excel设置表格基础(字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划线斜体字单元格对齐方式自动换行删除线超链接插入公式)
文章目录引入xlwt和创建workboos对象初始化样式和创建设置字体,赋值给style 保存文件自定义样式字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划 ...
VS2010字体颜色背景设置
1.字体设置首先我们打开VS2010,然后依次选择工具->选项->环境->字体和颜色,选择对应的就OK 2.背景色这个看个人喜好,网上的基本都推荐的几种颜色背景.可以自己稍加修改, ...
flutter 设置状态栏的颜色,背景appBar
flutter 设置状态栏的颜色,背景appBar: AppBar( elevation: 0.5, brightness: Brightness.light, 在有AppBar的界面,状态栏一般有B ...
Opencv -- 12图像色彩空间转换应用 -- 给证件照换颜色背景
应用:给证件照换颜色背景利用HSV中的常见色彩区分度比RGB中的色彩区分度更明显的优势,再结合inRange()函数可以将图片中不同的颜色给提取出来. openCV中的HSV颜色体系使用 Open ...

checkbook实现任何颜色背景

checkbook实现任何颜色背景相关推荐

最新文章

热门文章