css 能改变input type radio和checkbox 圆圈或方框的大小
把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 圆圈或方框的大小的更多相关文章
- 自定义input[type="radio"]的样式
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...
- 自定义input[type="radio"]
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- <input type="radio" >与<input type="checkbox">值得获取
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-a ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- 原生javascript自定义input[type=radio]效果
2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- 【js】null 和 undefined的区别?
1.首先看一个判断题:null和undefined 是否相等 console.log(null==undefined)//true console.log(null===undefin ...
- 安装笔记, caffe 、 opencv等
1. 1.1 opencv static linux mkdir build & cd build cmake .. -LH 这句话用来查看编译选项 如果不知道编译啥 可以用这个查看一下 ...
- javascript定义一个list
JavaScript可以定义数组类型,在javascript语言中List叫Array,它有以下2种定义方式方式1:var array=new Array();方式2:var array=[];通常在 ...
- JS-完数
完数 完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数.它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身.如果一个数恰好等于它的因子之和,则称该数 ...
- Linux环境下交叉编译器安装及运行
描述: 由于 使用第三方编译器是提示No such file or directory 原因:编译器为32位版本,而系统是64位的 解决方法:安装32位版本编译支持库 sudo apt-get ins ...
- cursor:not-allowed
今天发现了一个鼠标样式:not-allowed,是一个红色圈加一个斜杠,表示禁止的意思,似乎IE ,chrome firefox 都可以正常显示,很好用
- TensorFlow中numpy与tensor数据相互转化
numpy与tensor数据相互转化: *Numpy2Tensor 虽然TensorFlow网络在输入Numpy数据时会自动转换为Tensor来处理,但是我们自己也可以去显式的转换: data_ten ...
- Spring源码解读(一)
前期准备 首先搭建一个简单的Spring Demo工程 项目目录结构如下图所示: applicationContect.xml (可以取其他文件名,只要在加载配置文件时指定文件路径) <?xml ...
- p4434 [COCI2017-2018#2] Usmjeri
思路 并查集的好题 考虑到求满足条件限制的方案数,显然观察样例可知结果就是2^x,x是互不影响的边的集合数量 然后考虑如何求互不影响的边的集合数量 可以使用并查集,用i和i+n表示这个点的父亲连向它的 ...
- 【UVALive-7040F】Color
题目大意:给定一个长度为 N 的序列,现有 M 种颜色,选出一些颜色对这个序列进行染色,要求相邻元素颜色不相同.求最终序列恰好有 K 种不同颜色的染色方案数,结果对1e9+7取模. 题解:二项式反演 ...