文档章节

简单重写类型为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
博文 81
码字总数 28860
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
4
0
现场看路演了!

HiBlock
昨天
8
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
7
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
8
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部