CSS3实现自定义Checkbox和Radiobox
2013-11-22 10:02
197 查看
我们知道浏览器自带的Checkbox复选框不怎么美观(这或许是我们看习惯了的缘故),而且复选框在不同的浏览器上显示的样式又有很大的差异,由于目前越来越多的人开始接受支持CSS3的现代浏览器,所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式,个人觉得比浏览器自带的Checkbox美观不少。
下面先来看一下最终实现效果
效果演示地址
效果图如下
下面来分析一下源代码,原理很简单,先把页面上<input type="checkbox" />的display设置为none,从而把它隐藏掉,然后利用CSS3代码来绘制与checkbox邻近的label元素:
HTML代码:
CSS3代码:
下面的CSS代码可以让checkbox选中后出现阴影的效果,主要利用了box-shadow属性:
radiobox的实现也是同样的原理,具体实现方式大家可以在线演示研究,也可以下载源码,非常简单实用。
下面先来看一下最终实现效果
效果演示地址
效果图如下
下面来分析一下源代码,原理很简单,先把页面上<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的实现也是同样的原理,具体实现方式大家可以在线演示研究,也可以下载源码,非常简单实用。
相关文章推荐
- CSS3和jQuery实现的自定义美化Checkbox和Radiobox
- css3和jquery实现自定义checkbox和radiobox组件
- CSS3和jQuery实现的自定义美化Checkbox
- CSS3实现自定义Checkbox动画
- jQuery CSS3自定义美化Checkbox实现代码
- jQuery CSS3自定义美化Checkbox实现代码
- CSS3和jQuery实现的自定义美化Checkbox...
- css3 写checkbox 标签单选框和实现类似于多选框的样式改写
- 列表标题栏添加CheckBox(自定义HanderView的时候实现)
- 自定义CheckBox,用自己的方式来实现个性勾选。checkbox与button的联动。
- 带checkbox的ListView实现(二)——自定义Checkable控件的实现方法
- 2015。1.21(Session实现分页checkbox,页面设计,SpringMvc,MODEL与自定义标签)
- Android---自定义带CheckBox的ExpandableListView实现
- 带checkbox的ListView实现(二)——自定义Checkable控件的实现方法
- 用自定义图片代替原生checkbox实现全选,删除以及提交的方法
- 用自定义图片代替原生checkbox实现全选,删除以及提交
- jQuery实现自定义checkbox和radio样式
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- Tapestry 4 实现自定义组件-CheckboxList
- css3自定义图形的实现效果