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. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  2. C语言深度剖析-----数组与指针分析

    数组的本质: 指针的运算: 小标VS指针: a和&a的区别: 例: 数组参数: 所以下例返回4 指针和数组的对比小结:

  3. jQuery----鼠标移动、点击案例

    单击隐藏: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  4. 每日技术总结:flex,选项卡,classList,

    1.Flex布局子元素垂直居中 给父元素添加以下样式: .parent { display: flex; align-items: center; } 2.js面向对象的选项卡 见另一篇文章 js面向 ...

  5. 【hdu 6194】string string string

    [链接]h在这里写链接 [题意] 给你一个字符串s以及一个整数k; 让你找出这个字符串里面,恰好出现了k次的子串的个数. k>=1 [题解] 后缀数组题. 对于输入的字符串.求出它的Height ...

  6. UILabel基本用法

    UILabel *_label = [[UILabel alloc]initWithFrame:CGRectMake(, self.view.frame.size.height*)]; _label. ...

  7. anaconda中实现双spyder版本

    1)先在conda中创建一个名为python2的环境,并下载对应版本python2.7 conda create --name python27 python=2.7 2)激活python2环境 ac ...

  8. Giraph源代码分析(六)——Edge 分析

    HamaWhite 原创,转载请注明出处.欢迎大家增加Giraph 技术交流群: 228591158 欢迎訪问: 西北工业大学 - 大数据与知识管理研究室 (Northwestern Polytech ...

  9. Sphinx+MySQL5.1x+SphinxSE+mmseg中文分词

    什么是Sphinx Sphinx 是一个全文检索引擎,一般而言,Sphinx是一个独立的搜索引擎,意图为其它应用提供快速.低空间占用.高结果相关度的全文搜索功能.Sphinx能够很easy的与SQL数 ...

  10. Gcc 的使用

    Gcc 的使用前言  编译器在编译过程中,先将程序代码编译成 object 文件,然後再和程序库联结,成为可执行文件.因此一个编译器须提供的参数主要有几类:  1.指定编译器编出的object 文件或 ...