只支持IE9及以上

html

<label><input class="radio" type="radio" name="radio1"/><span class="radio-style"></span>10</label>

<label><input class="radio" type="checkbox" name="radio1"/><span class="radio-style checkbox-style"></span>10</label>

css

.radio{display:none}

.radio-style{background-color:#fff;border:2px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:0.506666rem;width:0.506666rem;margin-right:0.133333rem;vertical-align:middle;line-height:}

.radio:checked + .radio-style:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:0.293333rem;margin:0.106666rem;width:0.293333rem;}

.checkbox-style,.radio:checked + .checkbox-style:after{border-radius:

纯css修改单选、复选按钮样式的更多相关文章

  1. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

  3. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  4. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  7. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...

  8. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  9. 单选复选按钮以及Toast学习笔记

    1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...

  10. jqurey 遍历 div内的所有input单选复选按钮并判断是否选中及Attr（checked）无效的解决

    关于页面前面标签 <ul> @{ foreach (var item in vote) { if (!string.IsNullOrEmpty(item.Img)) { <li cl ...

随机推荐

  1. zhifubao

    使用Git的一个优势便是 我们可以自由的切换到其他分支,而不影响主分支的正常开发,每个分支上都是一份完成的可执行代码那么如何创建分支呢, 创建分支有几种方法, 本地分支和远程分支的差别,意义各是什么,

  2. python numpy 间的的数据变算公式

    import numpy as np a = np.arange(100) print(np.sum(a))#求和 print(np.mean(a))#平均值 print(np.max(a))#最大值 ...

  3. Nginx命令行控制

    在Linux中,需要使用命令行来控制Nginx服务器的启动与停止.重载配置文件.回滚日志文件.平滑升级等行为.默认情况下,Nginx被安装在目录usrlocal/nginx/中,其二进制文件路径为us ...

  4. -bash: yum: command not found

    在学习Linux时,发现yum命令无法执行.便查了下,整理成文. yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS ...

  5. Java面试题 静态代码块 构造代码块 构造方法 的执行顺序

    JAVA中的静态代码块 构造代码块 构造方法执行顺序: 静态代码块(类加载时执行)>>构造代码块>>构造方法 下面展示一个简单的例子,推荐大家动手运行一遍: public cl ...

  6. mysql 利用druid 为访问密码加密

    在原来数据库配置文件jdbc.properties 文件中增加几行加密文件 jdbc.username=rootjdbc.password=KqYkfcQkQOdOpCnaokLfb9Kbzdf+NG ...

  7. Java - day001 - 8种基本数据类型

    一字节8电位 Java byte 最左边一位表示正负,0是正,1是负. (option / alt)  + / 代码提示 Refactor 重构 Rename 重命名  (windows 重命名是选中 ...

  8. python Django2.X,报错 ‘learning_logs ’is not a registered namespace，如何解决？

    自己也查阅了自己出现了的问题,其中就有这么个按照书中来写的代码但是Django却是提示了  ‘learning_logs ’is not a registered namespace. 然后错误提示可 ...

  9. java gui 2

    1,编写程序,随机生成两个数,用户输入两个数的和,并进行评判.程序的初始界面如下: 点击“获取题目”,随机生成两个100以内的int类型的数,界面如下: 提示: (1)使用java.util.Rand ...

  10. IIS+Tomcat功能iis端口2

    之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...