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. NLP入门之语音模型原理

    这一篇文章其实是参考了很多篇文章之后写出的一篇对于语言模型的一篇科普文,目的是希望大家可以对于语言模型有着更好地理解,从而在接下来的NLP学习中可以更顺利的学习. 1:传统的语音识别方法: 这里我们讲 ...

  2. 【10月新版】Aspose.Pdf 10月新版V17.10发布 | 附下载

    2019独角兽企业重金招聘Python工程师标准>>> Aspose.Pdf for .NET 17.10 更新 功能和改进 核心 概述 类别 PDFNET-38067 支持DICO ...

  3. 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!

    为什么80%的码农都做不了架构师?>>>   摘要: 近日,阿里云宣布高性能时间序列数据库 (High-Performance Time Series Database , 简称 H ...

  4. Image Filter and Recover

    这是CS50的第四次大作业,顺便学习了图像的入门知识. 基础 黑白图(bitmap)的每个像素点只能取值0/1,1代表白色,0代表黑色. 常见的图片格式有JPEG/PNG/BMP,这些格式都支持RGB ...

  5. 【FPGA篇章六】FPGA编译向导:详解编译预处理功能

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 Verilog HDL语言和C语言一样也提供了编译预处理功能. Verilog HDL允许在程序中使用特殊的编译预处理语句. 在编译时,通常 ...

  6. Ubuntu 拦截并监听 power button 的关机消息

    system:ubuntu 18.04 platform:rockchip 3399 board:NanoPi M4 前言 物理上的电源按键短按之后,系统直接硬关机了,导致应用程序无法保护现场,就直接 ...

  7. CF#637 C. Nastya and Strange Generator

    C. Nastya and Strange Generator 题意 有一个随机全排列生成器,给出你一个全排列,让判断是否可以通过这个生成器产生. 生成器工作方式: 第i步为数字i寻找位置pos. 首 ...

  8. python 数据类型: 字符串String / 列表List / 元组Tuple / 集合Set / 字典Dictionary

    #python中标准数据类型 字符串String 列表List 元组Tuple 集合Set 字典Dictionary 铭记:变量无类型,对象有类型 #单个变量赋值 countn00 = '; #整数 ...

  9. Spring全家桶之spring boot(二)

    spring boot的两种配置文件: 虽然spring boot可以帮助我们进行一些配置项,但是有些内容还是需要开发者自己进行配置,因此spring boot提供了配置文件以供开发者配置.sprin ...

  10. Java IO流基础总结

    前言 好久不用Java的IO流,把好多的基础知识都忘了,昨天在写一段代码,发现好多细节都忘了.那天在组织组内代码评审的时候,发现有人在乱用IO流相关的类,所以还是写篇文章,把这个知识点总结一下. IO ...