css美化checkbox radio样式
/*check,radio*/
input.check_txt[type='checkbox']{
display: none;
} input.check_txt[type='checkbox'] + label{
display: block;
float: left;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #fff;
border:2px solid #cecece;
border-radius: 3px; cursor:pointer;
} input.check_txt[type='checkbox']:checked + label {
background: #f0f0f0 url(../images/check.png) no-repeat center center;
background-size:80%; }
html:
<p class="xd-clause-wrap">
<input type="checkbox" name="" id="clause" value="">
<label for="clause"></label> 我已阅读并同意<a href="javascript:;">《借款服务条款》</a>
</p>
css美化checkbox radio样式的更多相关文章
- css美化checkbox的样式
使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- css修改原生radio样式
日常工作中经常会用到单选框radio,而原生样式不好看无法满足项目要求,模拟写一个又比较麻烦,所以写了一个改变原生样式的demo. 原生样式: 改变后的样式: 以下为demo代码: <!DOCT ...
- CSS之checkbox&radio&textarea&select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- checkbox/radio 样式修改
只改颜色 input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: ...
- css 绘制checkbox,radio
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
随机推荐
- CMD和DOS的区别
很多人喜欢在这里把XP下的CMD和我们的DOS混淆,因此今天我特别发帖说明:CMD和DOS是完全不同的!请各位始终牢记这一点,否则在高手面前就丢人了!因为CMD是32位应用程序(而DOS是16位操作系 ...
- 高德地图 室内地图 API 的一些坑
开发指南 http://lbs.amap.com/api/javascript-api/guide/create-map/indoormap/ demo 大全: http://lbs.amap.com ...
- session生命周期
session生命周期 原文链接:http://blog.sina.com.cn/s/blog_72c8c1150100qpgl.html 文中黄色字体为我的标记修改或添加 Session保存在服务器 ...
- [silverlight—wcf]参数:调试资源字符串不可用,秘钥和参数通常提供足够的信息用以诊断问题。
这段时间在做一个项目,有一项需求是上传,经过思考之后,决定采取Silverlight+WCF的方式做上传操作.就在项目做完了之后,本地测试也都没问题,发布到服务器上的时候,顿时就出现故障了.在选择文件 ...
- BizTalk开发系列(十二) Schema设计之Group与Order
开发BizTalk项目的时候会先约定各系统之间往来的消息格式. 由于BizTalk内部唯一使用XML文档.因此消息的格式为XML Schema(XML Schema 用于描述 XML 文档的结构).虽 ...
- 【iCore3 双核心板_FPGA】例程五:Signal Tapll实验——逻辑分析仪
实验指导书及代码包下载: http://pan.baidu.com/s/1bnNRfaB iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- 腾迅股票数据接口 http/javascript
腾迅股票数据接口 http/javascript 分类: Finance Perl2012-12-21 23:48 31132人阅读 评论(3) 收藏 举报 之前使用了新浪的股票数据,由于新浪http ...
- Laravel-5.1 ---- 将mews captcha整合到项目中!
经过摸索,终于能在laravel 5.1中应用验证码了. 因为英语渣五水平,所以几乎没搜索到什么有用的,于是考虑在github上搜索验证码包! 提示: github上的package中往往会有使用说明 ...
- embedded tomcat context.xml
在网络下载相关的embedded tomcat jar.也可直接在maven中检索. 在main方法中,输入以下代码: //新建tomcat实例 Tomcat tomcat = new Tomcat( ...
- Linux内核设计第四周——扒开系统调用三层皮
Linux内核设计第四周 ——扒开系统调用三层皮 一.知识点总结 (一).系统调用基础知识 1.用户态和内核态 内核态:在高级别的状态下,代码可以执行特权指令,访问任意的物理地址: 用户态:在相应的低 ...