把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class

<label for="remember" class="text-muted"><span class="circle-btn"></span><input type="radio" id="remember" style="display:none;" />记住密码</label>
label {
-webkit-user-select: none;
}
.circle-btn {
width: 18px;
height: 18px;
border-radius: 100%;
border: 1px solid #808080;
transition: all 0.4s;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline-block;
vertical-align: middle;
margin: -4px 3px 0 0;
}
.circle-btn.active {
border-width: 5px;
border-color: #1dace8;
}

css 能改变input type radio和checkbox 圆圈或方框的大小的更多相关文章

  1. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  2. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  3. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  4. <input type="radio" >与<input type="checkbox">值得获取

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  6. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  7. 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  8. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  9. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 在Pytorch上使用稀疏矩阵

    在Pytorch上使用稀疏矩阵 最近在写一个NLP的小项目,用到了Pytorch做神经网络模型.但是众所周知NLP的一个特点就是特征矩阵是稀疏矩阵,当时处理稀疏矩阵用的是scipy.sparse,现在 ...

  2. JSP 内置对象的说明

    1 page:指的是当前的JSP页面本身,它是java.lang.object类的对象 2 config对象:它是ServletConfig类的一个实例 3 exception对象:它是java.la ...

  3. java EE加载peoperties配置文件

    //加载配置文件 InputStream in = JedisUtils.class.getClassLoader().getResourceAsStream("redis.properti ...

  4. Webstorm2017.3.3软件的安装使用

    下载 ▶进入jetbrains的官方网站点击download,即下载开始.官方网站链接:http://www.jetbrains.com/webstorm/ 安装 ▶双击刚下载完成的.exe文件开始进 ...

  5. Spring源码解析 - springMVC核心代码

    一.首先来讲解下springMVC的底层工作流程 1.首先我们重点放在前端控制器(DispatcherServlet) 其类图: 因为从流程图看,用户的请求最先到达就是DispatcherServle ...

  6. sys和system用户的权限区别

    http://blog.sina.com.cn/s/blog_869b0f460100uckp.html Oracle sys和system用户.sysdba 和sysoper系统权限.sysdba和 ...

  7. 12个提高Java程序员工作效率的工具

    Java开发者常常都会想办法如何更快地编写Java代码,让开发过程变得更加轻松,更加高效.目前,市面上涌现出越来越多的高效编程工具.团长总结了几个常用的工具,其中包含了大多数开发人员已经使用.正在使用 ...

  8. 【异常】诡异的mysql错误,Pagehelper插件混乱导致吗

    1 详细的异常信息 Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in ...

  9. Linux 硬盘UUID相同处理方法

    OVF模板部署的linux虚拟机磁盘id是相同的,当同一个模板生成的虚拟机挂载虚拟机磁盘时就会遇到两个磁盘UUID相同的情况,导致系统启动后只能识别一个磁盘.这里介绍一下LVM分区的磁盘UUID相同的 ...

  10. 顺丰科技面试-java开发

    顺丰科技的面试官感觉人都挺随和,总共经历三面,两轮技术面,一轮hr面. 一.专业面一 主要是对着我的简历上的东西问,我的一个项目经历,两个实习上面以及自己提到会的技能展开的提问. (1)自我简介 (2 ...