改变默认的多选框 checkbox 样式~
效果图:
HTML代码:
<label for="Checkbox1" style="display:none;"></label>
<input type="checkbox" id="Checkbox1" value="option1" class="input_check">
CSS代码:
/* 复选框checkbox */
.input_check {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
/* 未选 */
.input_check{
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
width: 18px;
height: 18px;
}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus{
outline: none; /* outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。*/
}
/* 鼠标滑过未选 */
input[type=file]:hover, input[type=checkbox]:hover, input[type=radio]:hover{
border-color: #3bb8f6;
}
/* 已选 */
.input_check:checked {
display: inline-block;
background-image: url('../../../assets/img/checkbox2.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 18px;
height: 18px;
border: none;
}
/* 鼠标滑过已选 */
.input_check:checked:hover{
display: inline-block;
background-image: url('../../../assets/img/checkbox1.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 18px;
height: 18px;
border: none;
outline: none;
}
改变默认的多选框 checkbox 样式~的更多相关文章
- 自定义复选框 checkbox 样式
默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...
- 复选框checkbox样式修改
该方法只兼容IE9及以上 将checkbox和label关联起来, 将checkbox隐藏掉,通过点击label来点击checkbox,label的样式即可自定义. 通过checkbox:checke ...
- 纯CSS3来自定义单选框radio与复选框checkbox
单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- 安卓开发:UI组件-RadioButton和复选框CheckBox
2.5RadioButton 为用户提供由两个及以上互斥的选项组成的选项集. 2.5.1精简代码 在按钮变多之后,多次重复书写点击事件有些繁琐,我们在这里创建一个事件OnClick,每次点击时调用该事 ...
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
- layui 添加复选框checkbox后,无法正确显示及点击的方法
layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
随机推荐
- maven安装和应用
maven安装和应用 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://www.cnblogs.com/xihehua/p/9639045.html https://w ...
- mvn-dependencies-vs-dependencyManagement
dependencyManagement里只是声明依赖,并不实现引入,因此子项目需要显式的声明需要用的依赖. dependencies 相对于dependencyManagement,所有声明在dep ...
- [Linux]虚拟机下安装ubuntu后root密码设置
转自:https://blog.csdn.net/zcyhappy1314/article/details/17448223 问题描述: 在虚拟机下安装了ubuntu中要输入用户名,一般情况下大家都会 ...
- (IO模型介绍,阻塞IO,非阻塞IO,多路复用IO,异步IO,IO模型比较分析,selectors模块,垃圾回收机制)
参考博客: https://www.cnblogs.com/xiao987334176/p/9056511.html 内容回顾 协程实际上是一个线程,执行了多个任务,遇到IO就切换 切换,可以使用yi ...
- java内存模型,内存区域
Java虚拟机内存区域总结:Java虚拟机相当于一个抽象的计算机操作系统, 其管理的内从区域大体上可以分为栈和堆,就像c或c++中对内存的分类一样, 但这样的分类对于Java虚拟机来说太过粗浅, 实际 ...
- Error: Error occured while starting App. Original error: Activity used to start app doesn't exist or cannot be launched! Make sure it exists and is a launchable activity
Error: Error occured while starting App. Original error: Activity used to start app doesn't exist or ...
- JavaEE 期末总结
struts2部分 一.struts2框架的集成: 1.web.xml配置struts2过滤器:前端控制器.核心控制器 如果有多个过滤器,需要将该过滤器放置到最后一个 2.struts.xml配置:主 ...
- Debian系Linux源码安装Redis5.0.6
一,先在官网下载源码包:https://redis.io/download 二,解压源码包,并cd到解压后的目录: 三,执行make MALLOC=libc: 接着cd src[解压的目录里有这个子目 ...
- centos 7 下使用jexus 配置ASP.NET Core
1.安装jexus Jexus独立版(专业版)的安装 Jexus“独立版”指的是自带.net运行时(mono),不需要在客户服务器安装mono就能正常运行的Jexus版本,该版本只支持 64位Linu ...
- OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...