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. FastJson踩坑:@JsonField在反序列化时失效

    问题描述 一个对象(某个字段为枚举类型,为了不采用默认的序列化过程,用@JSONField指定了序列化器和反序列器,过程见旧博文),将其放到JSONArray中再序列化JSONArray对象,用得到的 ...

  2. 10)drf 过滤器(条件查询 排序 ) 分页器

    一.群查接口各种筛选组件 数据准备 models.py class Car(models.Model): name = models.CharField(max_length=16, unique=T ...

  3. JAVA设计模式之桥接模式(bridge)

    桥接模式: 分离抽象与具体实现,让他们可以独自发展,防止类爆炸 场景: 过年走亲戚是我们中国人传统的习俗,走亲戚那就少不了要买东西(苹果,牛奶等等),这些具体的东西就是具体的类 蒙牛牛奶,有机苹果,有 ...

  4. struts2初始化探索(一)

    上篇文章已经介绍了struts2的简单使用,现在开始源码的学习. 本篇主要介绍struts2的初始化.对应的源码为StrutsPrepareAndExecuteFilter中的init方法. 先贴源码 ...

  5. hadoop中如何动态更新集群队列和容量

    1.集群默认是FIFO容量调度器,有的时候不同的业务部门都需要使用hadoop集群,那么这时候就需要来设置容量调度器了,如何平衡各个部门的容量.合理利用资源? 首先配置调度器需要在修改两个配置文件,分 ...

  6. D365,实现批量上传和下载文件的工具

    这里演示下批量上传文件到D365的小程序工具,下载功能也是一样的思路跟逻辑. 通过文件名的前缀跟各个主档表的主键进行绑定来决定将附件挂在哪里. 1.上传界面. 2.查看附件上传结果.

  7. Ubuntu1804 源码阅读神器,egypt+graphviz 图形化显示函数调用关系(超详细+图文并茂)

    函数调用图可以让我们更加直观地了解到源码函数直接的调用和层次关系,提高阅读源码的效率,工欲善其事,必先利其器: 文章目录 1 前言 2 graphviz 安装 3 egypt 安装 4 测试 5 结论 ...

  8. IE浏览器下报错: strict 模式下不允许一个属性有多个定义

    vue项目,打包后在IE11和360浏览器(都是IE内核)上运行,控制台报了strict 模式下不允许一个属性有多个定义这个错误,导致流程不能正常走下去,查资料后知道应该是定义了重复的属性,于是就开始 ...

  9. 这一份MySQL书单,可以帮你搞定90%以上的面试题!

  10. 第九章(二)DAG上的动态规划

    DAG上的动态规划: 有向无环图上的动态规划是学习DP的基础,很多问题都可以转化为DAG上的最长路.最短路或路径计数问题. 1.没有明确固定起点重点的DAG模型: 嵌套矩形问题:有n个矩形,每个矩形可 ...