只支持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. 2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165325 Exp2 后门原理与实践 实验内容(概要): (1)使用netcat获取主机Shell,cron启动 首先两个电脑(虚拟机)都得有netcat, ...

  2. 51nod1236 序列求和 V3

    这题炒鸡简单,只要第一步想对了后面顺风顺水QWQ(然鹅我没想到) 前置芝士: 斐波那契数列通项公式 等比数列求和公式 二项式定理 这题要求的就是 \(\sum_{i=1}^n Fib(i)^k\) , ...

  3. FF D8 FF FE 00 24 47 00转图片

    String[] img = "FF D8 FF FE 00 24 47 00 9D 0C 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 F0 0 ...

  4. 第十五章：Oracle12c 数据库 警告日志

    一:查看警告日志文件的位置 Oracle 12c环境下查询,alert日志并不在bdump目录下,看到网上和书上都写着可以通过初始化参数background_dump_dest来查看alter日志路径 ...

  5. oracle Data Modeler 使用教程

    由于 powerdesigner 的版权问题.公司要求集体换成 oracle Data Modeler .免费版就够用,哈哈.这有很详细的入门教程,看一看吧: 官方正版教程 ,特详细,只是英文的,也只 ...

  6. memcpy一种实现方法

    #include<stdio.h> #include<stdlib.h> void* memncpy(void* dest, const void* src, int coun ...

  7. 论文阅读笔记五十一：CenterNet: Keypoint Triplets for Object Detection(CVPR2019)

    论文链接:https://arxiv.org/abs/1904.08189 github:https://github.com/Duankaiwen/CenterNet 摘要 目标检测中,基于关键点的 ...

  8. Macro For Creating a dwStyle for a window without a menu bar and title bar

    Introduce For CreateWindowEx Creates an overlapped, pop-up, or child window with an extended window ...

  9. Redis 常用命令总结

    连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将数据 ...

  10. 注册httpmonitor提示 模块“httpMonitor.dll"加载失败

    注册HttpMonitor.dll提示失败,经过查看系统日志,发现原来是缺少依赖 从网上下载相关dll,放在同目录下,再次regsvr32 HttpMonitor.dll注册成功! 附上下载地址: h ...