更改html单选按钮、复选框样式纯css+html_让html复选健改样式-CSDN博客

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

本文介绍了一种通过CSS替换HTML中radio和checkbox原生样式的简单方法，使用背景图片和额外元素实现美化效果，提供代码示例。

摘要由CSDN通过智能技术生成

在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