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 ...
随机推荐
- vue-cli 构建vue项目
师父说,咱们还是要用vue-cli 去构建前端项目.然后我就开始了 懵逼之旅. 今天上午主要就是搞懂用webpack和vue-cli怎么搭建 运行项目 首先找到了咱们博客园 园友的博客,提供了大概五个 ...
- 基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...
- UVA 11461 - Square Numbers 数学水题
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- vscode markdown-all-in-one 源码编译成vsix
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one 有链接 Download Extensio ...
- Springboot+shiro配置笔记+错误小结(转)
软件152 尹以操 springboot不像springmvc,它没有xml配置文件,那该如何配置shiro呢,其实也不难,用java代码+注解来解决这个问题.仅以此篇记录我对shiro的学习,如有对 ...
- [TypeScript] Define a function type
type DigitValidator = (char) => boolean; -]{}/.test(char); export const digitValidators: {[key: s ...
- 百度地图 layer弹出地图 获取坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- boost::any的一般使用方法
01.#include <iostream> 02.#include <list> 03.#include <boost/any.hpp> 04. ...
- iOS开发ARC与MRC下单例的完整写法与通用宏定义
#import "XMGTool.h" /** * 1:ARC下的完整的单例写法:alloc内部会调用+(instancetype)allocWithZone:(struct _N ...
- 【solr专题之四】关于VelocityResponseWriter 分类: H4_SOLR/LUCENCE 2014-07-22 12:32 1639人阅读 评论(0) 收藏
一.关于Velocity的基本配置 在Solr中,可以以多种方式返回搜索结果,如单纯的文本回复(XML.JSON.CSV等),也可以返回velocity,js等格式.而VelocityResponse ...