单选框和上传文件的input的样式美化-蒲公英云

单选框和上传文件的input的样式美化

红太狼 2024-04-20 09:00 158阅读 0赞

1.效果如下：

在这里插入图片描述

2.HTML代码如下：

<div>
        <label class="radio_diy">
            <input name="sex" type="radio" checked="checked" /><span class="label">男     </span>
            <br>
        </label>
        <label class="radio_diy">
            <input name="sex" type="radio"/><span class="label">女</span>
        </label>
    </div>
    <div class="file-wraps">
        <span>上传文件</span>
        <input type="file" />
    </div>

3.CSS代码如下：

/* 此为单选框样式 */
        .radio_diy{
            display: block;
            position: relative;
            height: 30px;
            line-height: 30px;
            margin-bottom: 15px
        }
        .label{
            display: block;
            position: relative;
            padding-left:30px;
            box-sizing: border-box; 
            color: #999;
        }
        .label::after{
            content: "";
            border:1px solid #999;
            width:20px;
            height: 20px;
            display: block;
            position: absolute;
            top:50%;
            margin-top: -10px;
            left: 0px;
            border-radius: 50%;
        }
        .label::before{
            content:"";
            background: #2971f6;
            border-radius: 50%;
            display: block;
            width: 14px;
            height: 14px;
            position: absolute;
            top:50%;
            margin-top: -6px;
            left: 4px;
            opacity: 0;
        }
        .radio_diy input{
            display: none;
        }
        .radio_diy input:checked + .label:after{
            border-color: #2971f6;
        }
        .radio_diy input:checked + .label:before{
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        .radio_diy input:checked + .label{
            color: #2971f6;
            transition: color 0.6s ease;
        }
        /* 此为上传文件样式 */
        .file-wraps{
            background:#fa8823;
            width: 100px;
            height: 45px;
            line-height: 45px;
            position: relative;
            color: #fff;
            text-align: center;
            border-radius: 5px;
        }
        .file-wraps input{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;  
            right: 0;
            opacity: 0;
        }