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. 《从零開始学Swift》学习笔记（Day 63）——Cocoa Touch设计模式及应用之单例模式

    原创文章,欢迎转载.转载请注明:关东升的博客 什么是设计模式.设计模式是在特定场景下对特定问题的解决方式.这些解决方式是经过重复论证和測试总结出来的. 实际上.除了软件设计,设计模式也被广泛应用于其它 ...

  2. bootstrap 时间控件带（时分秒）选择器(需要修改才能显示，请按照参数说明后面的步骤进行修改)

    1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...

  3. proxool数据库连接池用法

    今天给大家介绍一种新的数据连接池实现方式--proxool数据库连接池,这是一个健壮.易用的连接池.以下通过一个Demo说明一下怎样使用: 项目结构例如以下: DBLink.java文件里的代码: p ...

  4. [CSS3] Create a fixed-fluid-fixed layout using CSS calc()

    CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you nee ...

  5. vs2008,2010,2012安装包下载

    近期在csdn学院当老师啦.把自己以学到的东西总结一下,录个视频给大家,也当发一下福利.这些以后都是自己无形的財产.哈哈. 安装与下载编程工具 Vs2008下载地址:http://pan.baidu. ...

  6. 细说CSS伪类和伪元素

    原文 简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素 伪元素在D ...

  7. [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

    In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...

  8. js进阶正则表达式实现过滤字符串（RegExp对象操作正则表达式）（正则：regular）（表达式：expression）

    js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression) 一.总结 1.str_replace:正则作用:高效快速匹配 2.break ...

  9. 使用truss、strace或ltrace诊断软件的"疑难杂症"

    原文链接 简介 进程无法启动,软件运行速度突然变慢,程序的"Segment Fault"等等都是让每个Unix系统用户头痛的问题,本文通过三个实际案例演示如何使用truss.str ...

  10. [RxJS] Use RxJS mergeMap to map and merge high order observables

    Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...