【HTML】简洁版的注册界面

最新推荐文章于 2024-06-05 13:34:25 发布

赤焰梦

最新推荐文章于 2024-06-05 13:34:25 发布

阅读量7.6k

点赞数 5

分类专栏： HTML/CSS/Javascript 文章标签： html 前端

本文链接：https://blog.csdn.net/m0_49442965/article/details/128393428

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<style>
    /* 单选按钮自定义颜色 */
    input[type='radio']:after {
     
       width: 15px;
       height: 15px;
       border-radius: 15px;
       top: -2px;
       left: -1px;
       position: relative;
       background-color: #d1d3d1;
       content: '';
       display: inline-block;
       visibility: visible;
       border: 2px solid white;
   }

   input[type='radio']:checked:after {
     
       width: 15px;
       height: 15px;
       border-radius: 15px;
       top: -2px;
       left: -1px;
       position: relative;
       background-color: #00BFFF;
       content: '';
       display: inline-block;
       visibility: visible;
       border: 2px solid white;
   }
   /* 多选按钮自定义颜色 */
   input[type=checkbox]{
     
            cursor: pointer;
            position: relative;
            width: 15px;
            height: 15px;
            font-size: 14px;
        }
        input[type=checkbox]::after{
     
            position: absolute;
            top: 0;
            border: none;
            /* background-color: #ff670c; */
            color: #fff;
            width: 15px;
            height: 15px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 1px
        }       
        input[type=checkbox]:checked::after{
     
            background-color: #F08080;
            border-color: #F08080;
            content: "✓";
            font-size