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; ...
随机推荐
- js 禁止表单提交的方法(文件上传)
添加图片上传的表单,在form 添加属性onsubmit,提交之前会执行其中的方法,若返回FALSE,不会提交,返回TRUE,才会提交 <form method="post" ...
- svn学习笔记(3)设置
1.图标集
- Aspose Cells 添加数据验证(动态下拉列表验证)
参考 :http://www.componentcn.com/kongjianjishu/kongjianjishu/2015-06-04/2781.html Aspose Cells是一款操作和处理 ...
- MyEclipse tomcat7.x 自定义项目部署路径
- BizTalk开发系列(三) 单机环境下的BizTalk Server 2006 R2安装
大部分的开发环境都是在单机环境下进行的,今天整理了一下BizTalk Server 2006 R2在单机环境下的安装步骤. 1. 软件需求 在独立服务器中完整安装BizTalk Server 2006 ...
- php初学第一课
php:强大的脚本语言 B/S:brower:浏览器 server:服务器 C/S: client:客户端 server:服务器 一.php嵌入页面的标记 1. <?php ?> # ...
- 无法启动Mysql服务,错误InnoDB: Attempted to open a previously opened tablespace.
2013-08-04 13:48:22 760 [ERROR] InnoDB: Attempted to open a previously opened tablespace. Previous t ...
- Ajaxupload.js上传插件使用
注意一下火狐,360IE78下的坑: 返回过来的response在不同浏览器下的字符串不一致 // response(chrome):<pre style="word-wrap: br ...
- 探索.git目录
.git目录 下面就开始进入.git目录,通过“ls”命令可以看到.git目录中的文件和子目录: 对于这些文件和目录,下面给出了一些基本的描述. hooks:这个目录存放一些shell脚本,可以设置特 ...
- Maven-010-maven 编译报错:Failure to ... in ... was cached in the local repository, resolution will not be reattempted until the update interval of nexus has elapsed or updates are forced.
今晚在编译 maven 项目的时候,命令行报错,出现 Failure to ... in ... 类似错误,详细的错误信息如下所示: [INFO] -------------------------- ...