CSS好看的上傳界面

網絡時代，人們需要不斷傳輸文件。因此，上傳界面也越來越重要。一個好看的上傳界面可以提高用戶的使用體驗和滿足感。以下是一些可以用CSS創建的好看的上傳界面。

<div class="upload-box">
<label for="file-upload" class="custom-file-upload">選擇文件</label>
<input id="file-upload" type="file"/>
<span class="file-name">請選擇文件</span>
</div>
.upload-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.custom-file-upload {
display: inline-block;
padding: 12px 24px;
background-color: #0275d8;
color: white;
border-radius: 4px;
cursor: pointer;
}
#file-upload {
display: none;
}
.file-name {
margin-top: 8px;
}

以上代碼實現了一個選擇文件的上傳界面。選擇文件按鈕具有自定義樣式，上傳后會顯示文件名。

下面是一個帶有進度條的上傳界面代碼。

<div class="upload-box">
<label for="file-upload" class="custom-file-upload">選擇文件</label>
<input id="file-upload" type="file"/>
<span class="file-name">請選擇文件</span>
<progress id="file-progress" max="100" value="0"></progress>
<div id="file-status">等待上傳</div>
</div>
.upload-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.custom-file-upload {
display: inline-block;
padding: 12px 24px;
background-color: #0275d8;
color: white;
border-radius: 4px;
cursor: pointer;
}
#file-upload {
display: none;
}
.file-name {
margin-top: 8px;
}
#file-progress {
width: 100%;
margin-top: 8px;
}
#file-status {
margin-top: 8px;
}

以上代碼實現了一個帶有進度條的上傳界面。用戶選擇文件后，進度條會根據上傳進度實時更新，上傳完成后，顯示上傳成功或上傳失敗的狀態。

總之，CSS可以創造出非常好看的上傳界面。開發者可以根據自己的需求進行定制。