【HTML】radio和checkbox样式美化
2016-07-08 17:37
926 查看
仅提供记录,怕忘记了
效果图:
<span style="font-size:14px;"><span class="radio-span">
<input type="radio" name="" value="0" checked="checked" class="radioClass"/>
</span>
<div class="check-custom">
<input class="radioClass" type="checkbox" name="integral" value="1"/>
</div>
样式
.radio-span {
width: 24px;
height: 18px;
padding-top: 3px;
cursor: pointer;;
text-align: center;
margin-right: 10px;
background-image: url(../image/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
display: inline-block;
vertical-align: middle;
}
.radio-span > input {
display: inline-block;
}
.on {
background-position: 0 0;
}
.radioClass {
opacity: 0;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.check-custom {
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(../image/checkbox_01.gif);
background-repeat: no-repeat;
background-position: 0 0;
display: inline-block;
margin-right: 5px;
}
.check-on {
background-position: 0 -21px;
}
</span>
效果图:
<span style="font-size:14px;"><span class="radio-span">
<input type="radio" name="" value="0" checked="checked" class="radioClass"/>
</span>
<div class="check-custom">
<input class="radioClass" type="checkbox" name="integral" value="1"/>
</div>
样式
.radio-span {
width: 24px;
height: 18px;
padding-top: 3px;
cursor: pointer;;
text-align: center;
margin-right: 10px;
background-image: url(../image/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
display: inline-block;
vertical-align: middle;
}
.radio-span > input {
display: inline-block;
}
.on {
background-position: 0 0;
}
.radioClass {
opacity: 0;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.check-custom {
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(../image/checkbox_01.gif);
background-repeat: no-repeat;
background-position: 0 0;
display: inline-block;
margin-right: 5px;
}
.check-on {
background-position: 0 -21px;
}
</span>
相关文章推荐
- css文本框与按钮美化效果代码
- 样式表CSS布局经验
- jQuery根据ID获取input、checkbox、radio、select的示例
- jquery实现的代替传统checkbox样式插件
- C#获取动态生成的CheckBox值
- 大家看了就明白了css样式中类class与标识id选择符的区别小结
- 重置默认样式 css reset第1/2页
- Android控件之CheckBox、RadioButton用法实例分析
- ASP.NET中 CheckBox复选框控件的使用
- 在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox
- asp.net动态产生checkbox(数据源为DB或内存集合)
- asp.net gridview中用checkbox全选的几种实现的区别
- asp.net treeview checkbox 相关问题
- IE中checkbox在刷新后初始化的问题
- javascript中checkbox使用方法简单实例演示
- 浅谈checkbox的一些操作(实战经验)
- asp.C#实现图片文件与base64string编码解码
- JavaScript中获取Radio被选中的值
- jQuery操作属性和样式详解
- JavaScript通过this变量快速找出用户选中radio按钮的方法