input[type='radio']
//width 16px
//height 16px
display none
//input[type='radio']:chcked
// backgound #006a45
input:disabled
background #f5f5f5
input:checked + i
background-color #f6f8f9
color #bbb;
border 1px solid #e1e1e1
input + i
box-shadow 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)
padding 8px
border-radius 50px
display inline-block
position relative
input:checked + i::after
content ' '
width 8px
height 8px
border-radius 50%
position absolute
top: 4px
background #019c66
box-shadow inset 0px 0px 10px rgba(0,0,0,0.3)
text-shadow 0px
left 4px
font-size 32px

css 单选框 样式 填充自定义背景 after的更多相关文章

  1. 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)

    复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...

  2. 用css实现html中单选框样式改变

     我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...

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

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

  4. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  5. 纯css单选框

    1.没有用bootstrap时: .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50 ...

  6. CSS的列表样式和网页背景

    CSS的列表样式 1. 设置title和列表 HTML: <!DOCTYPE html><html lang="en"><head>    &l ...

  7. 好看css搜索框样式_分享8款纯CSS搜索框

    最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...

  8. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 纯css实现单选框样式

    html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...

随机推荐

  1. PHP Web木马扫描器代码

    <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 ...

  2. Java RMI使用

    1. Java RMI介绍 RMI:远程方法调用(Remote Method Invocation).能够让在某个java虚拟机上的对象像调用本地对象方法一样调用另一个java 虚拟机中的对象上的方法 ...

  3. ZOJ 1076 Gene Assembly LIS

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=76 题目大意: 题目前面都是废话. 给你一串基因,然后给你上面的外显子的起始和终 ...

  4. [疯狂Java]JDBC:事务管理、中间点、批量更新

    1. 数据库事务的概念:     1) 事务的目的就是为了保证数据库中数据的完整性.     2) 设想一个银行转账的过程,假设分两步,第一步是A的账户-1000,第二步是B的账户+1000.这两个动 ...

  5. Deep Learning for Nature Language Processing --- 第四讲(下)

    A note on matrix implementations 将J对softmax的权重W和每一个word vector进行求导: 尽量使用矩阵运算(向量化).不要使用for loop. 模型训练 ...

  6. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  7. 学习金字塔 分类: T_TALENT 2014-05-21 09:25 331人阅读 评论(0) 收藏

    学习金字塔是美国缅因州的国家训练实验室研究成果,它用数字形式形象显示了:采用不同的学习方式,学习者在两周以后还能记住内容(平均学习保持率)的多少.它是一种现代学习方式的理论.最早它是由美国学者.著名的 ...

  8. Oracle 字符集的查看和修改 分类: H2_ORACLE 2013-06-19 16:52 316人阅读 评论(0) 收藏

    一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...

  9. mysql 按日期分组

    select DATE_FORMAT(NOW(),'%Y%m%d') days,count(caseid) count from tc_case group by days; //date_forma ...

  10. hibernate级联保存问题

    异常:org.hibernate.TransientObjectException: object references an unsaved transient instance 解决方法: XML ...