把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. 检测对象类型的两种方式,constructor属性和instanceof

    //本例是为了记录检测对象类型的两种方式,即constructor属性和instanceof操作符.详见<高三>P145        function Person(name, age, ...

  2. Arcgis js之web墨卡托(3857)转经纬度坐标(4326)

    Arcgis js之web墨卡托(3857)转经纬度坐标(4326) 手动转化方法: function mercatorTolonlat(mercator){ var lonlat={x:0,y:0} ...

  3. sql server 查看表中某一字段的排序规则

    SELECT o.name,o.object_id,c.name,c.column_id,c.collation_name   FROM sys.columns c      JOIN sys.obj ...

  4. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  5. mac上配置apidoc环境

    1. 安装node.js 和npm 前往 https://nodejs.org/en/ 下载node.js的最新版本,双击.pkg进行安装 在终端输入 node -v ,如正确输出版本号即安装成功 ( ...

  6. Linux/Unix/Cygwin 常用命令

    以下只说明各指令的基本用法,若需详细说明,请用man去读详细的manual.[Cygwin通常没有安装 man相关的文件,所以没有man功能] 1.关于文件/目录处理的指令: 1.1 ls 这是最基本 ...

  7. C# Winform 禁止一个进程运行多次

    禁止一个进程运行多次 using System; using System.Windows.Forms; namespace StartExe { static class Program { /// ...

  8. (6)python基础数据类型

    python的六大标准数据类型 (一)Number   数字类型(int float bool complex) (二)String 字符串类型 (三)List 列表类型 (四)Tuple 元组类型 ...

  9. xcode 中 vary for traits详解

    https://www.jianshu.com/p/d6896437e5a7  这篇文章写的很好!

  10. okhttp拦截器之CacheInterceptor解析

    在上一次[https://www.cnblogs.com/webor2006/p/9150658.html]了解了缓存的存与取的细节之后,接下来就可以分析一下OkHttp的缓存拦截器啦: OkHttp ...