TA貢獻1806條經(jīng)驗 獲得超8個贊
我打開你的鏈接是這樣的
不明覺厲。我按照我的想法寫一個，你看一下對你有沒有幫助
<style type="text/css">
*{margin: 0;padding: 0}
.file_box{width: 100px; height: 100px; border: 1px dashed #1f9de0; position: relative; margin: 30px;}
.file_box::before, .file_box::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 50%;
background-color: #1f9de0;
transform: translateY(-50%);
}
.file_box::after{
width: 50%;
height: 1px;
transform: translateX(-50%);
}
input[type='file']{width: 100%; height: 100% ; opacity: 0; position: absolute; z-index: 1; cursor: crosshair;}
.close{
position: absolute;
top:0;
right: 0;
transform: translate(50%,-50%) ;
width: 20px;
height: 20px;
background-color: #999;
border-radius: 50%;
cursor: pointer;
}
.close::before, .close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 10px;
background-color: #fff;
transform: translate(-50%,-50%) rotate(45deg);
}
.close::after{
width: 10px;
height: 1px;
transform: translate(-50%,-50%) rotate(45deg);;
}
</style>
<div class="file_box">
<i class="close"></i>
<input type="file">
</div>
舉報