css 单选框 样式 填充自定义背景 after


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的更多相关文章
- 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)
复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...
- 用css实现html中单选框样式改变
我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- 纯css单选框
1.没有用bootstrap时: .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50 ...
- CSS的列表样式和网页背景
CSS的列表样式 1. 设置title和列表 HTML: <!DOCTYPE html><html lang="en"><head> &l ...
- 好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...
- vue.单选和多选,纯css自定义单选框样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯css实现单选框样式
html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...
随机推荐
- HDU - 3341 Lost's revenge(AC自己主动机+DP)
Description Lost and AekdyCoin are friends. They always play "number game"(A boring game b ...
- HttpClient请求发送的几种用法二:
public class HttpClientHelper { private static readonly HttpClientHelper _instance = new H ...
- 11.1 Android显示系统框架_framebuffer原理及改进
1. Android显示系统框架Android Graphic UI with GPU Hardware Accelerationhttps://community.nxp.com/docs/DOC- ...
- P2P平台的"我要借款"功能,是否需要上传借款人的相关资料
P2P平台的前端系统,一般都会有"我要借款"这个功能.有的平台,非常重视这个功能, 把它作为主要菜单的其中一项.有的把它看得相对次要,放在顶部Top栏中. 毕竟P2P平台,其实主 ...
- 22、在Ubuntu 14.0上使用韦东山IP2977测试总结(未成功)
1. 去www.kernel.org下载同版本的内核(与Ubuntu 14.0) 解压后把drivers/media/video/uvc目录取出(发现我的3.13版本的在drivers\media\u ...
- 一位90后程序员的自述:如何从年薪3w到30w!
初入职场之时,大多数人都应该考虑过这样的一个问题,如何找到一种实用,简化web流程的方法,在工作之中能有所提升和突破. 学好哪些?基础必须精通! 九层之塔,起于垒土;千里之行,始于足下.入门之前,这些 ...
- UICollectionView使用方法补充(照片轮播墙)
一 整体功能图和实现思路 1 完整的功能图: 2 实现功思路: 1> 流水布局(实现UICollectionView必需要的条件) 2> 自己定义cell(实现UICollectionVi ...
- JAVA Concurrent包 中的并发集合类
我们平时写程序需要经常用到集合类,比如ArrayList.HashMap等,但是这些集合不能够实现并发运行机制,这样在服务器上运行时就会非常的消耗资源和浪费时间,并且对这些集合进行迭代的过程中不能进行 ...
- matplotlib学习之函数积分图
# coding:utf-8 import numpy as np from matplotlib import pyplot as plt from matplotlib.patches impor ...
- keil编译后Program Size: Code=46284 RO-data=988 RW-data=580 ZI-data=1094588
Program Size: Code=46284 RO-data=988 RW-data=580 ZI-data=1094588 Code : 程序中代码所占字节大小 RO-data : ...