把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. Shiro——入门Demo

    Shiro——入门Demo 环境-  引入相关maven依赖, shiro-core,commons-logging 配置shiro配置文件:ini后缀 主方法测试: import org.apach ...

  2. vue报类似警告Computed property "isLoading" was assigned to but it has no setter

    一.原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 setter,也就是 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个警告,vuex还会出现通过com ...

  3. SpringCloud之RabbitMQ安装

    本文介绍Linux以及MAC OS下的RabbitMQ安装及配置: 一.Linux环境下的RabbitMQ安装(CentOS) 1.安装ErLang Erlang(['ə:læŋ])是一种通用的面向并 ...

  4. vue项目,子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  5. 在php中连接数据库 pdo

    在php中连接数据库 pdo //数据库信息 $mysql_conf = array( 'host' => '127.0.0.1', 'db' => 'meteorolog_foreign ...

  6. MySQL开启binlog无法启动ct 10 21:27:31 postfix/pickup[4801]: warning: 6BD991A0039: message has been queue

    1 详细异常 ct 10 21:27:31 postfix/pickup[4801]: warning: 6BD991A0039: message has been queue Oct 10 21:2 ...

  7. Mysql(三):表操作

    一 存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 详见:http://www.cnblogs.com/6324TV/p/8481061.html 二 表介绍 表相当于文 ...

  8. 原生js为页面添加爱心特效和判断手机端还是电脑端登录

    <!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function (window, document ...

  9. windows下虚拟python环境

    Windows虚拟环境 cd %HOMEDRIVE%%HOMEPATH%\Desktop python3  -m  venv venv 环境变量修改脚本bat,把脚本放到%HOMEDRIVE%%HOM ...

  10. DATASNAP双缓存下载文件

    原文链接:http://www.cnblogs.com/hnxxcxg/archive/2012/12/29/2839358.html procedure TFrmMain.btnUpdateFile ...