只支持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. 编写ROS程序--HelloROS

    <机器人操作系统浅析>ch3学习记录 A Gentle Introduction to ROS 3.1 创建工作区(工作空间)和功能包 创建工作空间 ~/ros 我们称之为工作区目录 在工 ...

  2. Linux启动activemq失败

    第一种情况: 在网上查找错误,通过./activemq console命令可以查看到activemq启动的错误信息,另外在data/activemq.log文件中可以查看到错误日志. java.io. ...

  3. 用户态与内核态 & 文件流与文件描述符 简介【转】

    转自:https://www.cnblogs.com/Jimmy1988/p/7479856.html 用户态和内核态 程序代码的依赖和调用关系如下图所示: Lib:标准ASCI C函数,几乎所有的平 ...

  4. 自定义QGraphicsItem

    简述: QGraphicsItem 是场景中 item 的基类.图形视图提供了一些典型形状的标准 item,例如:矩形 ( QGraphicsRectItem ).椭圆 ( QGraphicsElli ...

  5. centOS7在VirtualBox中装好后的网络连接问题

    1. 环境 物理机OS:Windows 7 虚拟机:VirtualBox 虚拟机OS:CentOS7 2. 虚拟机网络设置 (该部分内容参考于网络,未深究原因,待后续研究补充) 网卡1设置如下图: 网 ...

  6. face++ php

    总流程是先上传文件,保存到后台,获取返回来的face_token保存下来,然后拿face_token添加到faceSet里面去,搜索的时候结果会返回faceSet里面的face_token 1.dem ...

  7. 初学python之路-day11

    一.函数的参数:实参与形参 # 参数介绍: # 函数为什么要有参数:因为内部的函数体需要外部的数据 # 怎么定义函数的参数:在定义函数阶段,函数名后面()中来定义函数的参数 # 怎么使用函数的参数:在 ...

  8. 关于form-checkbox 必填项无效的错误

    校验规则要写在一个form里 检查data,给个默认值. 否则刚进去错误提示不显示. 其次,要加 type 类型,注意大小写 触发类型为 change .

  9. C#基于websocket-sharp实现简易httpserver(封装)

    一.背景 其实就是很简单的,公司会桌面开发的人员紧缺啊,项目又赶,而我们公司的前端人员人多还厉害(ps:吐槽下,后端的人真的少啊,会桌面开发的更少啊),所以萌生出了使用html+js来构建本地应用程序 ...

  10. Docker----起步(2)----在Ubuntu上安装最新版的Docker CE

    之前写了一篇文章关于Docker安装的博客,最近再次使用的时候,在docker的官方文档上发现最新版本的Docker(V18.03)的安装方式和之前有点区别,有一些命令发现不能用了.(真的是一天不学习 ...