2022-05-26 分类: 网站建设
前言:
某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,
遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式,
没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,
而且最重要的是效果好,故在此和大家分享一下。
原理:
之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,
所以仅靠一句类似"color:#fff"的语句是不可能的,不过考虑:
(A)html每个input都可以加一个label,点击label,也会出发input的点击:
(B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:
(C)input标签可以隐藏:
(D)点击label后,可以通过JS,修改其背景图片:
(此处为图片)
看到这里有没有恍然大悟,什么自定义单选按钮的图标,
不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,
达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,
也不过是换下图片而已。如果还不能实现,我们接着往下细谈:
实现:
原理中说的四点,也可以看作实现的自定义单选按钮的四部曲:
A:没啥好说的,就是标签使用。
网页标题:Html单选按钮自定义样式
文章网址:https://www.cdcxhl.com/news/159358.html成都网站建设公司_创新互联,为您提供外贸建站、搜索引擎优化、企业网站制作、域名注册、网站改版、网站策划
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容