文档章节

简单重写类型为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
博文 87
码字总数 30488
作品 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
转-JQuery选择器及radio,checkbox,select取值和反选

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

huntering
2015/08/25
0
0
Bootstrap 表单

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

wybo521
2016/01/26
26
0
使用DOM来创建页面元素的一些问题

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

唐玄奘
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
6分钟前
0
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-cli 在项目目录创建两个文件夹 functional-playground 和lib mkdir functional-playgroundmkdir lib...

lilugirl
6分钟前
0
0
linux定位应用问题的一些常用命令,特别针对内存和线程分析的dump命令

1.jps找出进程号,找到对应的进程号后面才好继续操作 2.linux查看进程详细信息 ps -ef | grep 进程ID 3. dump内存信息 Jmap -dump:format=b,file=YYMMddhhmm.dump pid 4.top查看cpu占用信息 ...

noob_chr
6分钟前
0
0
Android TV开发-按键焦点

写在前面 按键焦点过程了解 2.1 dispatchKeyEvent 过程了解 2.2 焦点查找请求过程了解 1.2.1 第一次获取焦点 1.2.3 按键焦点 焦点控制 焦点记忆 应用场景 参考资料 [TOC] 1. 写在前面 工...

冰雪情缘l
6分钟前
0
0
java框架学习日志-3

这章主要是补充一些ioc创建对象的方式,ioc容器在写好<bean></bean>的时候就已经创建对象了。在之前的例子中,一直都是无参的构造方法。下面给出有参的构造方法的对象的创建,没有什么难点重...

白话
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部