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. 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介

    如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

  2. iOS_05_iOS设备发展史

    ios设备发展史 IPhone一代 * 2007年发布. * 支持电子邮件.移动电话.短信.网络浏览等. * 采取触摸键盘 * 3.5英寸,480 x 320像素. * 后置摄像投200万像素. IP ...

  3. 11.2 Android显示系统框架_android源码禁用hwc和GPU

    2. 修改tiny4412_Android源码禁用hwc和gpu(厂家不会提供hwc和gpu的源代码,没有源代码就没法分析了,因此在这里禁用该功能并用软件库实现)最终源码: git clone htt ...

  4. 8.4 Android灯光系统_源码分析_电池灯

    电池灯的Java代码在batteryservice.java中 电池的状态电量等信息由驱动获得,但驱动不会主动做这些事情,因此肯定有个App调用驱动程序读取电池信息,称这个App为A应用. 还有个Ap ...

  5. OC学习篇之---类的定义

    OC中类的相关知识 OC和C的最大区别就是具有了面向对象的功能,那么说到面向对象,就不得不说类这个概念了,如果学过Java的话,那么对类和对象的概念就不陌生了,因为Java是非常纯正的面向对象设计语言 ...

  6. Windows中DLL文件的意义及其作用

    Windows中DLL文件的意义及其作用 DLL是Dynamic Link Library的缩写,意为动态链接库.DLL文件即动态链接库文件,是一种可执行文件,它允许程序共享执行特殊任务所必需的代码和 ...

  7. 交换排序(java)

    package exchange_sort; import java.util.Random; /*各类交换排序  * ------数据存储范围1~s.length-1 ------  *主要包含   ...

  8. 关于.c和.h 和定义变量的问题

    最初调试的时候是因为有个错误在wavplay.h文件中 于是我跳到了recorderl.h中:从图中看到引用了main.h 出现这个问题的具体原因还是不太清楚: 不过我任务是因为: wavplay.h ...

  9. ios开发零散知识点总结

    1:当有导航栏的时候,子视图为UIScrollView,或是继承于UIScrollView的控件如UITableView,UICollectionView等,控制器会自动调用 self.automat ...

  10. 【54.08%】【BZOJ 1941】Hide and Seek

    Time Limit: 16 Sec  Memory Limit: 162 MB Submit: 919  Solved: 497 [Submit][Status][Discuss] Descript ...