Html单选按钮自定义样式

2022-05-26    分类: 网站建设

  前言:

  某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,
遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式,
没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,
而且最重要的是效果好,故在此和大家分享一下。

  

原理:
    之前已经提及,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>

当前名称:Html单选按钮自定义样式
网站链接:https://www.cdcxhl.com/news8/159358.html

成都网站建设公司_创新互联,为您提供网站设计小程序开发网站设计公司ChatGPT动态网站网站维护

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

手机网站建设