Example of customizing radio button style in html-HTML Tutorial-php.cn

Example of customizing radio button style in html

黄舟

Release： 2017-10-26 10:22:51

Original

2526 people have browsed it

Example of customizing radio button style in

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: &#39;&#39;;
            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>

Copy after login

The above is the detailed content of Example of customizing radio button style in html. For more information, please follow other related articles on the PHP Chinese website!