设置 input type="radio" 单选按钮的样式

最新推荐文章于 2024-10-09 10:13:28 发布

m0_37850231

最新推荐文章于 2024-10-09 10:13:28 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/m0_37850231/article/details/100119650

版权

编写单选按钮的样式，使样式更加美观

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        .RadioStyle input{
            display:none;
        }
        .RadioStyle label{
            border:1px solid #ccc;
            color:#666;
            padding:2px 10px 2px 5px;
            line-height:28px;
            min-width:80px;
            text-align:center;
            float:left;
            margin:2px;
            border-radius:4px;
        }
        .RadioStyle input:checked+label{
            background:url('img/Img/ico_checkon.svg') no-repeat right bottom;
            border:1px solid #00a4ff;
            background-size:21px 21px;
            color:#00a4ff;
        }

    </style>
</head>
<body>
  <div class="RadioStyle">
    <input type="radio" name="styleType" id="rdo_white" value="White" checked/>
    <label for="rdo_white">白底</label>

    <input type="radio" name="styleType" id="rdo_black" value="black" >
    <label for="rdo_black">黑底</label>

    <input type="radio" name="styleType" id="rdo_blue" value="blue">
    <label for="rdo_blue">蓝底</label>
  </div>
</body>
</html>