zoukankan      html  css  js  c++  java
  • 9.使用CSS样式,自己制作单选框样式和选中功能

    自己制作单选框样式:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- reset.css文件内容参考:https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
        <link rel="stylesheet" href="./reset.css">
        <style>
            .radio-diy .radiocircle {
                width: 12px;
                height: 12px;
                border: 1px solid #999;
                border-radius: 50%;
                cursor: pointer;
                display: inline-block;
            }
            
            .radio-diy input:checked+span {
                border: 1px solid#008c8c;
            }
    
            .radio-diy input:checked~span {
                color: #008c8c;
            }
    
            .radio-diy input:checked+span.radiocircle::after {
                content: "";
                display: block;
                width: 6px;
                height: 6px;
                background: #008c8c;
                border-radius: 50%;
                cursor: pointer;
                margin-left: 3px;
                margin-top: 3px;
            }
    
    
    
            input[type="radio"] {
                display: none;
            }
        </style>
    </head>
    
    <body>
        请选择性别:
        <label class="radio-diy">
            <input type="radio" name="gender" value="male">
            <span class="radiocircle"></span>
            <span>男</span>
        </label>
        <label class="radio-diy">
            <input type="radio" name="gender" value="female">
            <span class="radiocircle"></span>
            <span>女</span>
        </label>
    </body>
    
    </html>
    radio.css

    效果展示:

  • 相关阅读:
    JS-07 (js的面向对象编程)
    AI SiameseFC
    phpstorm调试
    Php 编译扩展
    canvas
    AI FCN
    AI WebGL
    Python flask
    JIT 即时编译
    小程序
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12678812.html
Copyright © 2011-2022 走看看