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

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

##### 1.效果如下： #####

![在这里插入图片描述][20190920160749623.png]

##### 2.HTML代码如下： #####

##### 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;
    		}

[20190920160749623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb3f8282d2ed49329dd6a7e263f9b63e.png