CSS3实现自定义Checkbox和Radiobox
2024-09-01 07:03:39
我们知道浏览器自带的Checkbox复选框不怎么美观(这或许是我们看习惯了的缘故),而且复选框在不同的浏览器上显示的样式又有很大的差异,由于目前越来越多的人开始接受支持CSS3的现代浏览器,所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式,个人觉得比浏览器自带的Checkbox美观不少。
下面先来看一下最终实现效果
效果图如下
下面来分析一下源代码,原理很简单,先把页面上<input type="checkbox" />的display设置为none,从而把它隐藏掉,然后利用CSS3代码来绘制与checkbox邻近的label元素:
HTML代码:
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
CSS3代码:
.regular-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
下面的CSS代码可以让checkbox选中后出现阴影的效果,主要利用了box-shadow属性:
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
radiobox的实现也是同样的原理,具体实现方式大家可以在线演示研究,也可以下载源码,非常简单实用。
最新文章
- android黑科技——完美解决界面逻辑的数据框架DataBinding(最新)的使用(二)
- linux 限制root SSH登陆和限制su
- [转载] Win PE内安装Windows 7原版镜像 / 安装程序无法创建新的系统分区,也无法定位现有的系统分区
- 图解Android - Binder 和 Service
- Linux和Windows远程桌面互连
- 给 Android 初学者的 Gradle 知识普及
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.7
- C 语言 输入字符串 并计算输入的字符的长度
- C#.NET利用ContextBoundObject和Attribute实现AOP技术--AOP事务实现例子
- [转]从数据库中导出用友U8的现存量数据到Excel表
- 怎样让PDM图形列表显示name和code等需要的信息
- MyBatis(二):Select语句传递参数的集中方案
- 在centos中搭建基于nginx的apt源服务器,整合yum源和apt源在一台服务器
- 【Java集合系列六】LinkedHashMap解析
- FlashWindowEx实现窗口在任务栏闪烁/变化颜色
- C#学习笔记(33)——批量修改word标题
- (asp)JScript读写、复制、移动文件 asp也就那回事(4)
- HTML <;input>; 标签的 name 属性
- [html]点击button后画面被刷新原因:未设置type=";button";
- delphi 获取一个字符占用几个字节,方法