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> ...
随机推荐
- vue网络不好时不间断请求
配置默认参数 const { apiConfig: { timeout, retry, retryDelay } } = config; if(timeout) axios.defaults.time ...
- poi的基本导入
一.获取列的值 private String getCell(Cell cell){ if(null == cell){ return ""; } try{ cell.setCel ...
- SQL学习——LIKE运算符
原文链接 LIKE 作用 在WHERE子句中使用LIKE运算符来搜索列中的指定模式. 有两个通配符与LIKE运算符一起使用: % - 百分号表示零个,一个或多个字符 _ - 下划线表示单个字符 注意: ...
- android提升
https://blog.csdn.net/lou_liang/article/details/82856531
- Mysql(三):表操作
一 存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制 详见:http://www.cnblogs.com/6324TV/p/8481061.html 二 表介绍 表相当于文 ...
- swagger2注解使用方法
swagger注解整体说明: @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界 ...
- CP and Tucker Tensor Decomposition
1.. 2..
- java线程基础巩固---线程生命周期以及start方法源码剖析
上篇中介绍了如何启动一个线程,通过调用start()方法才能创建并使用新线程,并且这个start()是非阻塞的,调用之后立马就返回的,实际上它是线程生命周期环节中的一种,所以这里阐述一下线程的一个完整 ...
- Kummer定理
简单学习了一下\(Kummer\)定理,参考了几篇不错的资料,放下链接 1.Legendre公式和Kummer定理 2.Kummer定理-超级Lucas定理-数论-组合数学-学习笔记 3.百度百科 证 ...
- python3正则表达式总结
转自csdn,去这里看更多吧: https://blog.csdn.net/weixin_40136018/article/details/81183504 还有一个废话很多的详细系列,在这里:htt ...