更改html单选按钮、复选框样式纯css+html

最新推荐文章于 2023-04-04 15:40:21 发布

糖送圆茗亲

最新推荐文章于 2023-04-04 15:40:21 发布

阅读量1.7k

点赞数 1

分类专栏：学习 html css 文章标签： css html 网页设计学习交流

本文链接：https://blog.csdn.net/wangyc1234/article/details/100174103

版权

学习同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

在html的大部分元素中，是可以直接设置它的背景样式的，但其中就不包括radio和checkbox

在这里插入图片描述

说实话这两个东西原本的样式确实不怎么好看，所以在很多设计中都会更改

方法多种多样，这是我觉得最简单直接的一种，原理是用另一个元素来代替按钮的位置，并更改其背景图片

这是我用的背景图片

在这里插入图片描述

直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>单、复选按钮更换样式测试</title>
        <style>
            fieldset{
                width: 30%;
            }
            
            /* 单选按钮 */
            /* 先将按钮原来的样式隐藏 */
            input[type=radio]{
                opacity: 0;
                display: inline-block;
                position: relative;
                left: 19px;
            }
            /* 设置紧跟其后的<span>元素的样式，设置背景图片 */
            input[type=radio] + span{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url('../icons/radio1_1.png') no-repeat 0px 4px;
                background-size: 80%;
                
            }
            /* 当按钮被选中时，将<span>换一张背景图片即可 */
            input[type=radio]:checked + span{
                background: url('../icons/radio1_2.png') no-repeat 0px 4px;
                background-size: 80%;
            }

            /* 复选框 */
            /* 原理和思路跟单选按钮的更改一样 */
            input[type=checkbox]{
                opacity: 0;
                display: inline-block;
                position: relative;
                left: 19px;
            }
            
            input[type=checkbox] + span{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url('../icons/radio1_1.png') no-repeat 0px 4px;
                background-size: 80%;
            }
            
            input[type=checkbox]:checked + span{
                background: url('../icons/radio1_2.png') no-repeat 0px 4px;
                background-size: 80%;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>单、复选按钮更换样式测试</legend>
                <p>单选按钮<br>
                    <label for="a"><input type="radio" name="rrr" value="a"><span></span>AAAAA</label>
                
                    <label for="b"><input type="radio" name="rrr" value="b"><span></span>BBBBB</label>
                
                    <label for="c"><input type="radio" name="rrr" value="c"><span></span>CCCCC</label>
                </p>

                <p>复选框<br>
                        <label for="x"><input type="checkbox" name="ccc" value="x"><span></span>XXXXX</label>
                
                        <label for="y"><input type="checkbox" name="ccc" value="y"><span></span>YYYYY</label>
                    
                        <label for="z"><input type="checkbox" name="ccc" value="z"><span></span>ZZZZZ</label>
                </p>
            </fieldset>
        </form>

        <br><br>
        <img src="../icons/radio1_1.png" alt="radio1_1.png">
        <img src="../icons/radio1_2.png" alt="radio1_2.png">
    </body>
</html>

这里我为了方便，单复选我用的都是同一种背景，效果如下

在这里插入图片描述
如果有更简的方法，希望大家指出。。

糖送圆茗亲

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
更改html单选按钮、复选框样式纯css+html

在html的大部分元素中，是可以直接设置它的背景样式的，但其中就不包括radio和checkbox说实话这两个东西原本的样式确实不怎么好看，所以在很多设计中都会更改方法多种多样，这是我觉得最简单直接的一种，原理是用另一个元素来代替按钮的位置，并更改其背景图片这是我用的背景图片直接上代码：<!DOCTYPE html><html> <head&g...
复制链接

扫一扫