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. 写PPT的先扬后抑的思路

    近期给一个客户做IT战略规划. 基本结束了,客户要求写点有高度的东西.我想也是,尽管眼下的PPT也触及到战略和行业的问题,可是没有总结出来.于是就挖空心思,琢磨了三天.写了4页PPT.改动了几遍.还算 ...

  2. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  3. POJ 2402 Palindrome Numbers(LA 2889) 回文数

    POJ:http://poj.org/problem?id=2402 LA:https://icpcarchive.ecs.baylor.edu/index.php?option=com_online ...

  4. 3、C++快速入门

    参考书籍: C++程序设计教程_第二版_钱能    //篇幅较少,适合快速学习 C++ Primer Plus  第六版  中文版   //篇幅较大,讲的非常详细 C++一般必须包含的头文件是#inc ...

  5. dp hdu5653 xiaoxin and his watermelon candy

    传送门:点击打开链接 题意:有n个箱子排成一排,有m个炸弹.位置告诉你.如今炸弹的左边伤害和右边伤害能够自己控制,要求 每一个炸弹炸的箱子数的累乘,输出答案取log2并乘以1e6 思路:直接2for ...

  6. 【19.77%】【codeforces 570D】Tree Requests

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. PatentTips - SNMP firewall

    BACKGROUND OF THE INVENTION [0001] The present invention relates to communications and, more particu ...

  8. 【2006】求N!的精确值

    Time Limit: 3 second Memory Limit: 2 MB 对于阶乘函数,即使自变量较小,其函数值也会相当大.例如: 10!=3628800 25!=155112100433309 ...

  9. 【34.57%】【codeforces 557D】Vitaly and Cycle

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. [Ramda] Handle Branching Logic with Ramda's Conditional Functions

    When you want to build your logic with small, composable functions you need a functional way to hand ...