文档章节

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

闫亚亚
 闫亚亚
发布于 2016/12/05 14:21
字数 344
阅读 5
收藏 0
点赞 0
评论 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
博文 64
码字总数 21891
作品 0
济南
转-JQuery选择器及radio,checkbox,select取值和反选

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

huntering ⋅ 2015/08/25 ⋅ 0

JQuery选择器大全

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

Alexdevlin ⋅ 2016/04/06 ⋅ 0

Bootstrap 表单

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

wybo521 ⋅ 2016/01/26 ⋅ 0

使用DOM来创建页面元素的一些问题

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

唐玄奘 ⋅ 2017/12/27 ⋅ 0

JQuery选择器大全

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

zyt_1978 ⋅ 2016/06/13 ⋅ 0

实现自定义样式的Radio Button

有如下HTML片段: 此时的页面: 思路: 可为label元素前用伪类增加新的内容(自定义的Radio样式)。 用CSS让新增的样式(背景色)随着单选按钮的选中和取消而变化。 隐藏真正的单选按钮。 第...

摆渡者 ⋅ 01/27 ⋅ 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

jQuery选择器总结

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

紫地瓜 ⋅ 2012/12/08 ⋅ 0

jquery 获取及设置input各种类型的值

获取 input 的 value var searchval = $("#searchinput").val(); 转自:http://www.cnblogs.com/myfjd/archive/2011/11/25/2263702.html 获取选中的值 获取一组radio被选中项的值 var item =......

james_laughing ⋅ 2016/12/27 ⋅ 0

关于jquery 对表单元素的取值

用ssh+jquery 框架做了两个项目,在表单<input type="radio"/>元素取值时竟然有个很大的问题没发现,取值时不能根据id属性来获取radio元素类型的值,如:$("#id").val()这种方式来取值,这样...

肖文锋 ⋅ 2012/09/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 23分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 29分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 32分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 40分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 43分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 今天 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 今天 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部