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. 获得CCNA和CCNP及CCIE认证的必备条件和有效期绍

    CCNA认证培训介绍 CCNA认证(CCNA-思科网络安装和支持认证助理)是整个Cisco认证体系中最初级的认证,同时它也是获得CCNP认证.CCDP认证和CCSP认证的必要条件(CCIP认证.CCI ...

  2. 一只简单的网络爬虫(基于linux C/C++)————socket相关及HTTP

    socket相关 建立连接 网络通信中少不了socket,该爬虫没有使用现成的一些库,而是自己封装了socket的相关操作,因为爬虫属于客户端,建立套接字和发起连接都封装在build_connect中 ...

  3. libevent(三)event_base

    libevent能够处理三种事件: I/O.定时器.信号. event_base 统一管理所有事件. struct event_base { const struct eventop *evsel; ...

  4. python-圆周率的计算【random库的应用】

    圆周率的计算 ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪ ...

  5. A. Powered Addition(二进制性质-思维)

    \(拿样例来看1 7 6 5\) \(6成长到7是最合理的,因为1s就可以实现而且对于后面来说最优\) \(5成长到7是最合理的,因为2s就可以实现而且对于后面最优\) \(发现了什么?二进制是可以组 ...

  6. What?废柴, 模拟登陆,代码控制滑动验证真的很难吗?Are you kidding???

    1.简介 在前边的python接口自动化的时候,我们由于博客园的登录机制的改变,没有用博客园的登录测试接口.那么博客园现在变成了滑动验证登录,而且现在绝大多数的登录都变成这种滑动验证和验证码的登录验证 ...

  7. python 基础应用5-简单购物车

    1.列表去重 #列表去重 li = [1,2,33,33,2,1,4,5,6,6] set1 = set(li)# 转为集合 li = list(set1)# 转为列表 print(li)#[1, 2 ...

  8. python 基础应用2

    1.格式化输出% name = input('请输入姓名:') age = input('请输入年龄:') job = input('请输入工作:') mas = '''---------- info ...

  9. Codeforces Round #643 (Div.2)

    前言:这套cf我感觉出的很不错,AB就不说了,唯一有点欠缺的就是C和D的位置应该换一下,C出的挺不错,反正我当时没有想出来(赛后补题的时候其实也不难..听朋友说还可以FFT优化,然而我是个图论手并不会 ...

  10. 如何在最新版本的eclipse上使用低版本的jdk

    高版本的eclipse在第一次打开的时候只能配置相匹配的jdk.例如我所示版本eclipse版本初始化的时候提示要jdk1.8版本才能打开,可是根据实际工作情况需要jdk1.7. 我的eclipse版 ...