html中单选按钮居中代码,Html单选按钮自定义样式(示例代码)
前言:
某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。
原理:
之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句是不可能的,不过考虑:
(A)html每个input都可以加一个label,点击label,也会出发input的点击:
是否
(B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:
是否
(C)input标签可以隐藏:
是否
(D)点击label后,可以通过JS,修改其背景图片:
(此处为图片)
看到这里有没有恍然大悟,什么自定义单选按钮的图标,不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,也不过是换下图片而已。如果还不能实现,我们接着往下细谈:
实现:
原理中说的四点,也可以看作实现的自定义单选按钮的四部曲:
A:没啥好说的,就是标签使用。
男
B:
设置背景:
background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
设置背景大小:
background-size:20px 40px; (这里我的背景图是两个图标上下接在一起的,故高度为背景的两倍)
设置显示方式:
display: inline-block; (设置label为行内块元素,让它能有宽高,而且不换行)
设置高度和行高:
height: 20px;line-height: 20px;
设置文字靠右一点:
text-indent:20px;
C:隐藏单选按钮:display:none;
D: 这一步我使用的JQuery,主要为了方便。首先定义了一个被选中的css的class,另外给所有的单选按钮点击时都添加了一个方法:找出所有name相同的单选按钮的label,去掉他们被选中的样式,然后给自己加上一个选中的样式。
选中的样式:
.checked {
background-position: 0 -20px;
}
这里我用了background-position,把背景图向上偏移20px,从而把选中的图片显示出来。
添加点击处理方法:
$(function(){
//给所有的单选按钮点击添加处理
$("input[type=\'radio\']").click(function(){
//找出和当前name一样的单选按钮对应的label,并去除选中的样式的class
$("input[type=\'radio\'][name=\'"+$(this).attr(\'name\')+"\']").parent().removeClass("checked");
//给自己对应的label
$(this).parent().addClass("checked");
});
});
附:
最后:
如果想修改其他标签,或者给其他标签(比如:多选框)添加样式,也可以尝试这种办法。
html中单选按钮居中代码,Html单选按钮自定义样式(示例代码)相关推荐
- python 更新数据库历史_python 实现数据库中数据添加、查询与更新的示例代码
一.前言 最近做web网站的测试,遇到很多需要批量造数据的功能:比如某个页面展示数据条数需要达到10000条进行测试,此时手动构造数据肯定是不可能的,此时只能通过python脚本进行自动构造数据:本次 ...
- python查询数据库后更新_python 实现数据库中数据添加、查询与更新的示例代码...
一.前言 最近做web网站的测试,遇到很多需要批量造数据的功能:比如某个页面展示数据条数需要达到10000条进行测试,此时手动构造数据肯定是不可能的,此时只能通过python脚本进行自动构造数据:本次 ...
- python代码中怎么增加数据_python 实现数据库中数据添加、查询与更新的示例代码...
一.前言 最近做web网站的测试,遇到很多需要批量造数据的功能:比如某个页面展示数据条数需要达到10000条进行测试,此时手动构造数据肯定是不可能的,此时只能通过python脚本进行自动构造数据:本次 ...
- Java代码安装maven jar_Java中Maven项目导出jar包配置的示例代码
具体代码如下所示: src/main/java src/main/resources ${project.build.directory} **/*.java src/test/java src/te ...
- 播放器地址抓取 php,从优酷土豆视频地址中获取swf播放器分享地址 - PHP示例代码...
从优酷土豆视频地址中获取swf播放器分享地址 - PHP示例代码 分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/10/27 由于最近项目开发中遇到视频分享的功能,以下简单 ...
- android 代码 卸载app,Android在一个app中安装并卸载另一个app的示例代码
Android在一个app中安装并卸载另一个app 1.在app→src→main下新建文件夹asserts,将准备安装的apk文件放在asserts内 2.在app→src→main→res下新建文 ...
- python实现杨辉三角思路_Python极简代码实现杨辉三角示例代码
Python极简代码实现杨辉三角示例代码 杨辉三角,又称贾宪三角形,帕斯卡三角形,是二项式系数在三角形中的一种几何排列. 把每一行看做一个list,写一个generator,不断输出下一行的list ...
- python抠图精确到发丝_Python用5行代码实现批量抠图的示例代码
前言 对于会PhotoShop的人来说,抠图是非常简单的操作了,有时候几秒钟就能扣好一张图.不过一些比较复杂的图,有时候还是要画点时间的,今天就给大家带了一个非常快速简单的办法,用Python来批量抠 ...
- python抠图_Python用5行代码实现批量抠图的示例代码
前言 对于会PhotoShop的人来说,抠图是非常简单的操作了,有时候几秒钟就能扣好一张图.不过一些比较复杂的图,有时候还是要画点时间的,今天就给大家带了一个非常快速简单的办法,用Python来批量抠 ...
最新文章
- CSS捡屎记 // Web开发之精通CSS
- JS,中文,未结束的字符常量
- Leetcode295 数据流中的中位数-最小堆和最大堆
- JAVA去掉HTMl以及CSS样式
- python 内置递归
- ASP.NET MVC 4 小项目开发总结
- oracle定时关闭job,Oracle job定时操作
- H3C vrrp *** ipsec 基本配置
- Netty工作笔记0085---TCP粘包拆包内容梳理
- JavaScript——编码问题
- 《长安十二时辰》火了!程序员版本过于真实!
- 你真的会用搜索引擎吗
- 游戏开发中的沟通成本
- POJ 2112 Optimal Milking(最大流)
- 串口助手使用16进制发送数据
- KGB知识图谱能够为公司分析上市影响因素
- 决策模型(二):风险决策法
- ROS入门之Publisher的创建
- pybullet中欧拉角姿态可视化及顺序记录(画机械臂末端坐标)
- linux - 条件测试符