纯HTML+CSS实战之单/复选框美化

最新推荐文章于 2023-04-06 23:22:44 发布

小韩同学哇

最新推荐文章于 2023-04-06 23:22:44 发布

阅读量962

点赞数

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.youkuaiyun.com/qq_41886761/article/details/86134132

版权

本文通过实例代码分享了如何使用纯HTML和CSS来美化单选框和复选框，提供了一种自定义样式的方法，读者可以根据自己的需求进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

美化可根据自己需求进行修改，此处旨在传播方法

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS单/复选框美化</title>
    <style>
        .RadioStyle input{
            display: none;
        }
        .RadioStyle label{
            border: 1px solid #adadad;
            padding: 2px 10px 2px 5px;
            line-height: 28px;
            min-width: 80px;
            text-align: center;
            float: left;
            margin: 5px;
            border-radius: 5px;
        }
        .RadioStyle input:checked+label{
            color: white;
            background: url("images/dxk.jpg") 400px 100px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
你最喜欢哪个季节