把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. hbulider 快捷键

    跳转到行        Ctrl + G   页首        Ctrl + Home   页尾        Ctrl + End   下一个选项卡        Ctrl + Tab   上一个 ...

  2. 使用LaTeX和KnitR自动生成报告

    扩展名为.Rnw(Rtex)的文件就是包含了R代码的LaTeX文档.编译的时候,先用Rscript调用Knitr处理,生成.TeX文档,然后用pdfLaTeX/XeLaTeX编译成PDF. 最方便的编 ...

  3. 转载:Java:字节流和字符流(输入流和输出流)

    本文内容: 什么是流 字节流 字符流 首发日期:2018-07-24 什么是流 流是个抽象的概念,是对输入输出设备的抽象,输入流可以看作一个输入通道,输出流可以看作一个输出通道. 输入流是相对程序而言 ...

  4. dedeampz 套件关于PHP开启curl方法

    php开启curl方法主要用到三个文件libeay32.dll,php_curl.dll,ssleay32.dll 打开dede的安装目录,更改对应版本PHP中的php.ini文件,在 ; exten ...

  5. 微信小程序html(wxml)传参

    欢迎加入前端交流群交流知识:749539640 习惯了vue.angular用微信小程序有时候真感觉非人类..需要用data-xxx 先说下我们在vue.angular里事件传参 //html < ...

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

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

  7. HTML5学习:缩略图

    HTML代码 <div> <img src="img/pic.png" alt="This is a pic" /> </div& ...

  8. ASP.NET 静态化

    以前也说过页面静态化   但是说的好像不清楚 这次我用一个插件 URLRewriter  重写URL 先引用dll 然后再web.config中三步走 <configSections> & ...

  9. [CodeForces 160A] Twins

    题目链接:http://codeforces.com/problemset/problem/160/A 注意排序是从大到小排,不要上来就sort导致从小到大排,细节水题. AC代码: #include ...

  10. 《wifi加密破解论文》翻译介绍-wifi不再安全

    前言 wifi的加密协议WPA2已经被破解,影响范围包括所有支持wifi的设备,包括Android,Linux,Apple,Windows,OpenBSD,联发科技,Linksys等.其中对Andro ...