明辉站/网站教程/内容

html中单选框样式自定义的示例

网站教程2024-05-08 阅读
[摘要]html中单选框样式自定义的示例:<!DOCTYPE html><html lang="en"><head><!--单选框样式--><meta charset="UTF-8"><title&g...
html中单选框样式自定义的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--单选框样式-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .choice{
            position: relative;
        }
        .choice .radio{
            position: relative;
            display: inline-block;
            font-weight: 400;
            color: #0c4757;
            padding-left: 25px;
            cursor: pointer;
        }
        .choice .radio input{
            position: absolute;
            left: -9999px;
        }
        .choice .radio i{
            display: block;
            position: absolute;
            top: 6px;
            left: 0;
            width: 15px;
            height: 15px;
            outline: 0;
            border: 1px solid #666;
            border-radius: 50%;
            transition: border-color .3s;
            -webkit-transition: border-color .3s;
        }
        .choice .radio input:checked+i{
            border-color: #0c4757;
        }
        .choice .radio input+i:after{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: red;
            opacity: 0;
            transition: opacity .1s;
            -webkit-transition: opacity .1s;
        }
        .choice .radio input:checked+i:after{
            opacity: 1;
        }
    </style>
</head>
<body>
<p class="choice">
    <label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>
    <label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>
</p>
</body>
</html>

以上就是html中单选框样式自定义的示例的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读