radio单选框样式设置

input[type=radio] {

display: inline-block;

vertical-align: middle;

width: 20px;

height: 20px;

-webkit-appearance: none;

background-color: transparent;

border: 0;

outline: 0 !important;

line-height: 20px;

color: #d8d8d8;

}

input[type=radio]:after {

content: "";

display:block;

width: 20px;

height: 20px;

border-radius: 50%;

text-align: center;

line-height: 14px;

font-size: 16px;

color: #fff;

border: 3px solid #ddd;

background-color: #fff;

box-sizing:border-box;

}

input[type=radio]:checked:after {

content: "L";

transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

border-color: #099414;

background-color: #099414;

}

菜鸟任小

h5 编辑单选框的样式的更多相关文章

  1. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...

  3. js自定义修改复选框单选框样式,清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  4. 纯CSS3来自定义单选框radio与复选框checkbox

    单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...

  5. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  6. LODOP打印超文本字符串拼接2 单选选择css样式表格

    之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...

  7. 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

    原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...

  8. 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  9. jQuery --- 实现 checkbox 样式的单选框

    早就想写点博客了 一直懒着动  最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题.得到的经验记录下来,希望能大家一点帮助 这是之前写的一个模态框 要求单选 但是 要求radio的默认样式 ...

随机推荐

  1. cookie ,session 和localStorage的区别详解

    2019独角兽企业重金招聘Python工程师标准>>> cookie ,session 和localStorage的区别详解 博客分类: js 当你在浏览网站的时候,WEB 服务器会 ...

  2. 导入sql错误

    2019独角兽企业重金招聘Python工程师标准>>> 导入sql错误: This function has none of DETERMINISTIC, NO SQL, or RE ...

  3. 编写简单的内核模块及内核源码下载,内核模块Makefile编写

    CentOS的内核源码默认是没有下载的,需要自己下载,首先安装linux的时候就应该知道linux的版本,我装的是Centos7的 下面查一下内核的版本,使用下面的命令 [scut_lcw@local ...

  4. 06 __init__ 和 __new__的关系和不同

    一. 双下new 和 双下init 关系 首先从__new__(cls,a,b,c)的参数说说起,__new__方法的第一个参数是这个类,而其余的参数会在调用成功后全部传递给__init__方法初始化 ...

  5. ln命令:软链接与硬链接的区别与应用

    ln命令:软链接与硬链接的区别与应用 摘要 Linux系统中,链接是一个十分常见且实用的文件处理命令,它分为软链接和硬链接两种类型.软链接类似于Windows中的快捷方式,硬链接又有着与原文件保持同步 ...

  6. ASP.NET Core 如何使用Mvc相关技术建立Controller、Tag Helper (下)

    上篇文章介绍了通过定义两个接口和服务类,分别实现这两个接口,并且进行了一个服务的注册. 今天就来建立Controller 接下来就是在控制器中通过构造函数的方式注入接口(见代码块6行) 代码块2行的意 ...

  7. C语言程序设计实验报告(第一次实验)

    C程序设计实验报告 实验项目:C语言程序设计教程实验1.3.2:1.3.3:1.3.4:2.3.1:2.3.2 姓名:赖瑾 实验地点:家 实验时间:2020.2.25 目录 C程序设计实验报告 一.实 ...

  8. 数据结构与算法:栈(Stack)的实现

    栈在程序设计当中是一个十分常见的数据结构,它就相当于一个瓶子,可以往里面装入各种元素,最先装进这个瓶子里的元素,要把后装进这个瓶子里的全部元素拿出来完之后才能够把他给拿出来.假设这个瓶子在桌上平放,左 ...

  9. Mybatis使用ResultMap

    解决字段名和属性名不一致的问题 - 新建数据库表的字段-这里就不贴上了 在下面链接有 https://www.cnblogs.com/rzkwz/p/12853899.html 设置实体类和数据库字段 ...

  10. 译文:在GraalVM中部署运行Spring Boot应用

    GraalVM是一种高性能的多语言虚拟机,用于运行以JavaScript等基于LLVM的各种语言编写的应用程序.对于Java应用也可作为通常JVM的替代,它更具有性能优势.GraalVM带来的一个有趣 ...