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基础_返回值的类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- oracle导入时IMP-00010: 不是有效的导出文件, 头部验证失败
头部验证失败是由于版本号不同所致,经试验可以通过如下方法进行修改:用notepad++工具打开dmp文件,可以看到头部信息 --TEXPORT:V11.01.00,即为源数据库的版本号,将其修改为目的 ...
- 7.使用EXPLAIN 来分析SQL和表结构_1
explain:查看执行计划 使用explain 关键字可以模拟优化器执行SQL查询语句,从而知道MySQL是如何处理你的SQL语句的 分析你的查询语句或是表结构的性能瓶颈 使用explain 可以获 ...
- DbHelper简单的使用
using System; using System.Windows.Forms; using System.Data.SqlClient; namespace WindowsFormsApp3 { ...
- 手写走通HTTP server 第二版本
HTTP server 2.0 1 接收客户请求 2 解析客户端请求 3 组合数据,形成HTTP response 4 将数据发送给客户端 升级 : 1 多线程接收客户端请求 2 基本的请求解析,根据 ...
- web开发:定位布局
一.盒子的显隐 二.小米topbar 三.相对定位 四.决定定位 五.固定定位 六.z-index属性 七.流式布局思想 八.hover父子悬浮 一.盒子的显隐 1.同一结构下, 如果采用浮动布局,所 ...
- String、StringBuffer和StringBuilder区别
String.StringBuffer和StringBuilder区别 1.长度是否可变 String 是被 final 修饰的,他的长度是不可变的,就算调用 String 的concat 方法,那也 ...
- shell脚本基础编写
shell脚本的格式 名称:Shell 脚本文件的名称可以任意,但为了避免被误以为是普通文件,建议将 .sh 后缀加上,以表示是一个脚本文件. shell 脚本中一般会出现三种不同的元素: 第一行的脚 ...
- systemctl automatically restart service
systemctl automatically restart service Pothi Kalimuthu Linux October 9, 2016 0 Minutes Reference ...
- python+Appium自动化:app滑动操作swipe
swipe Appium使用滑动操作用到了swipe方法,定义如下: swipe(self, start_x, start_y, end_x, end_y, duration=None) 从一个点滑动 ...