Html单选按钮自定义样式
前言:
某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。
原理:
之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句是不可能的,不过考虑:
(A)html每个input都可以加一个label,点击label,也会出发input的点击:
是否
(B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:
是否
(C)input标签可以隐藏:
是否
(D)点击label后,可以通过JS,修改其背景图片:
(此处为图片)
看到这里有没有恍然大悟,什么自定义单选按钮的图标,不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,也不过是换下图片而已。如果还不能实现,我们接着往下细谈:
实现:
原理中说的四点,也可以看作实现的自定义单选按钮的四部曲:
A:没啥好说的,就是标签使用。
<label for="sex-man" class="radio_label checked"><input type="radio" value="1" checked="checked" id="sex-man" name="sex" />男
</label>
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单选框只能点圆圈,Html单选按钮自定义样式
前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮, 遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式, 没一个说是修改圆圈圈,于是又去网 ...
- html单选按钮样式 正方形,Html单选按钮自定义样式
前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找 ...
- html中单选按钮居中代码,Html单选按钮自定义样式(示例代码)
前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找 ...
- html单选按钮自定义,css | radio单选按钮样式自定义
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的. 单选按钮最常见的地方 ...
- Python可视化matplotlib自定义:运行时参数修改、自定义样式、默认样式+plt.style.use()
Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认样式+plt.style.use() 目录 Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认 ...
- echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言 之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
- 关于ie,火狐,谷歌浏览器滚动条的隐藏以及自定义样式
最近做了一个项目,要求各个浏览器统一滚动条的样式,不显示滚动条,但是不影响鼠标的滑动事件. 查了很多资料,ie和谷歌都是可以自定义滚动条样式的,但是ie只能改变颜色,并不能修改宽度,圆角之类的.谷歌就 ...
- 从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
- Antd组件中单选框、复选框自定义样式的优雅实现
表单组件的样式控制算是antd组件使用的一大坑了. .以antd-mobile为例,checkbox选中与非选中状态是由Input包裹的父元素的'.am-checkbox-checked'来控制的 未 ...
最新文章
- Emacs 矩形编辑
- 摆摆控件,就可以实现多功能(提交、修改、浏览)的表单了[原]
- spring secrity(二)
- 组件和模块间Activity路由框架
- 阿里云容器服务发布 Knative 托管服务 | 云原生生态周报 Vol. 49
- 分布式系统概念 | 分布式锁:数据库、Redis、Zookeeper解决方案
- Ubuntu 安装 samba 实现文件共享和source insight 阅读uboot
- Linux(debian)操作基础(一)之压缩、解压缩
- BZOJ-3207 花神的嘲讽计划Ⅰ
- ubuntn 16.04.2下caffee的安装教程
- ResultSet大数据量导致内存溢出
- python练习-word操作(word字体替换)
- c#编程实战宝典 付强_C#开发实战宝典pdf
- Vue 3 中文文档来啦!
- 树莓派入门笔记(七)用Vlmcsd搭建Kms服务---2020-03-28 (1113)
- 笔记本win7系统关闭触摸板功能的方法
- tensorflow2 serving
- 腾讯入局“低代码”赛道:无需敲码,快速生成一个完整系统!
- 软件开发七宗罪(转)
- AntD的Table表头title加Icon图标和气泡提示Tooltip