把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. Django多对多

    表名小写+_set()  得到的是一个QuertSet集合,她的后面可以跟 .add()   .remove()   .update()   .clear() models.py  文件 # 学生表 ...

  2. get_object_or_404返回404(400)

    get_object_or_404:第一个参数为queryset,第二个参数必须以关键字的形式传递,否则报错

  3. error connection reset by peer 104

    connection reset by peer的常见原因 1.服务器的并发连接数超过了其承载量,服务器会将其中一些连接关闭:2. errno = 104错误表明你在对一个对端socket已经关闭的的 ...

  4. c语言之一个简单的《学生教师管理系统》小结记录(二)

    本篇博文用来记录学生头/教师文件建立以及结构体链表创建及链表相关操作 首先是头文件的建立 头文件包含学生结构体以及链表结构 1.学生结构体建立 /****定义学生信息******/ typedef s ...

  5. python异步编程 (转载)

    Python Async/Await入门指南   转自:https://zhuanlan.zhihu.com/p/27258289 本文将会讲述Python 3.5之后出现的async/await的使 ...

  6. 求 无向图的割点和桥,Tarjan模板

    /* 求 无向图的割点和桥 可以找出割点和桥,求删掉每个点后增加的连通块. 需要注意重边的处理,可以先用矩阵存,再转邻接表,或者进行判重 */ const int MAXN = 10010; cons ...

  7. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  8. 五分钟彻底搞懂你一直没明白的Linux内存管理

    现在的服务器大部分都是运行在Linux上面的,所以,作为一个程序员有必要简单地了解一下系统是如何运行的.对于内存部分需要知道: 地址映射 内存管理的方式 缺页异常 先来看一些基本的知识,在进程看来,内 ...

  9. R的数据结构--矩阵

    矩阵:存放相同类型元素的二维向量 参数解释 matrix(data=NA, nrow = 1, ncol = 1, byrow = FALSE, dimnames = NULL) 参数含义如下: da ...

  10. DataGrip 配置连接mysql8.0的注意事项

    在mysql8.0版本之后,依赖驱动文件不同,使用之前的连接配置,会无法正常的连接数据库. 已连接本地Mysql数据库为例,需在 URL配置项 jdbc:mysql://localhost:3306? ...