只支持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. 使用freemarker模板引擎生成word文档的开发步骤

    1.准备模板文档,如果word文档中有表格,只保留表头和第一行数据:2.定义变量,将word文档中的变量用${var_name}替换:3.生成xml文件,将替换变量符后的word文档另存为xml文件: ...

  2. LeetCode.atoi

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...

  3. 2019年Python、Golang、Java、C++如何选择？

    前言 作为开发者我们都知道,开发后台语言可选择的方向会很多,比如,Java,go,Python,C/C++,PHP,NodeJs….等很多,这么多语言都有什么样的优势?如果让你学习一门后端语言,又该如 ...

  4. source ~/.bash_profile 只生效一次 解决方案

    在~/.zshrc文件最后,增加一行: source ~/.bash_profile

  5. Mac 小功能

    Safari  安装扩展    https://safari-extensions.apple.com/?category=translation 关闭第三方验证  有时候打开自己下载的安装包会提示 ...

  6. js之词法作用域与动态作用域

    事实上JavaScript并不具有动态作用域,它只有词法作用域,简单明了,但是this机制某种程度上很像动态作用域 词法作用域:是一套引擎如何寻找变量以及会在何处找到变量的规则,它是定义在词法阶段的作 ...

  7. html网页引用中文字体，解决加载缓慢办法

    [ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...

  8. ***CodeIgniter框架集成支付宝即时到账支付SDK

    本文为CI集成支付宝即时到账支付接口 1.下载支付宝官方demo ;即时到账交易接口(create_direct_pay_by_user)(DEMO下载) 原文地址:https://doc.open. ...

  9. [原创]SecureCRT终端软件连接VMware Workstation Pro虚拟机

    Step1:检查主机的桥接有没有禁用 Step2:进入Ubuntu系统,进入到Ubuntu下,先查看Ubuntu虚拟机的IP配置,打开终端(Ctrl+Alt+T),通过ifconfig命令查看,可以看 ...

  10. JS中的位操作在实际项目中的应用

    前言: Linux中的文件管理子系统的权限管理,想必大家都知道:rwx分别代表read(可读),write(可写), execute(可执行,如果是可执行程序的话),其中rxw可以按照数字表示: r  ...