文档章节

简单重写类型为radio的input元素

闫亚亚
 闫亚亚
发布于 2016/12/05 14:21
字数 344
阅读 5
收藏 0

radio类型

很容易理解有选中前的样式和选中后的样式,选中前的样式很好选择,选中后的样式可以用:check这个伪类选择器选中。(多浏览器支持我还没完全掌握,目前只用webkit内核浏览器来说) 
然后先用-webkit-appearance:none;关闭浏览器自带样式,然后要做成选中前是一个空心圆,选中后是一个中间有个实心点的圆。(可以理解为在谷歌浏览器上自带的radio样式) 

空心圆可以使用圆角+背景色+阴影来表示:

<代入你的选择器>{
    -webkit-appearance:none;
    height: 13px;
    width: 13px;
    background-color: rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
    border-radius: 10px;
    outline: none;/*似乎谷歌浏览器还有一个蓝色的outline影响,于是去掉*/
} 

从样式可以看出来这个空心圆的直径是13px,阴影是1px,内部空心是5.5px。(然而查看控制台并不是这样的,我也不知道为何…) 
于是乎,选中后的圆应该也不能超过这个尺寸,而且深色圆点作为选中的圆点,厚border作为空心部分,最外层就要用到box-shadow属性来保证跟未选中时近似。

<代入你的选择器>:checked{
    background-color: rgb(104,104,104);
    border: 3px solid rgb(227,227,227);
    box-shadow: 0 0 1px rgb(104,104,104);
}

 

© 著作权归作者所有

共有 人打赏支持
闫亚亚
粉丝 1
博文 76
码字总数 27401
作品 0
济南
使用Ext Form自动绑定Html中的Form元素

Java代码 //把ext 对象绑定在Html Form元素时的ext属性中 Ext.override(Ext.Component, { initComponent :function(){ this.on('render', function(){ if(this.el) Ext.getDom(this.el).ext......

云轩
2014/02/26
0
0
JQuery选择器大全

jQuery 的选择器可谓之强 大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的...

Alexdevlin
2016/04/06
30
0
Bootstrap 表单

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标记和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默...

wybo521
2016/01/26
26
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0
使用DOM来创建页面元素的一些问题

在IE中使用DOM方式来动态创建页面元素的时候,我发现了一些问题。记录于此,如果您有好的意见欢迎提供,如果您也遇到此问题,希望能有助你解决。 对于动态HTML编程,IE实现了两套模型:一套是...

唐玄奘
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Memcached启动参数详解

memcached -d -m 1024 -l 192.168.100.101 -p 11211 -P /tmp/memcached.pid -c 1024 -f 1.25 -n 80 -t 16 运行参数描述 -d:以守护(daemon)进程方式启动; -u:是运行Memcache的用户,例如 ......

月下狼
15分钟前
0
0
xgboost-kaggle

https://www.kaggle.com/dansbecker/xgboost This tutorial is part of the Learn Machine Learning series. In this step, you will learn how to build and optimize models with the powe......

tantexian
16分钟前
0
0
nginx学习八 代理服务

最常用的语法 proxy_pass Syntax: proxy_pass URL;Default: --Context:location.if in location,limit_exception 反向代理 例:/etc/nginx/conf.d/default.conf 反向代理(代理服务端)......

Romanceling
23分钟前
0
0
npm ERR! Unexpected end of JSON ...

npm install 报错: npm ERR! Unexpected end of JSON input while parsing near '..."^2.8.14"},"_hasShrin' npm ERR! A complete log of this run can be found in: ... 打开终端 命令: 第......

大_侠
27分钟前
0
0
Android中的设计模式之责任链模式

参考 《设计模式:可复用面向对象软件的基础 》5.1 Chain of responsibility 职责链 对象行为型模式 《Android源码设计模式解析与实战》第9章 使编程更有灵活性--责任链模式 意图 使多个对象...

newtrek
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部