CSS上傳圖片按鈕樣式

input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.upload-btn {
display: inline-block;
border: 1px solid #ccc;
padding: 10px 20px;
border-radius: 5px;
background-color: #fff;
color: #000;
text-align: center;
cursor: pointer;
}
.upload-btn:hover {
background-color: #ccc;
color: #fff;
}

如何使用

1. 在HTML中添加一個input元素，并設置類型為file。

<input type="file" id="upload-file">

2. 添加一個自定義的按鈕，用于觸發文件選擇框。使用for屬性將按鈕與input元素綁定。

<label for="upload-file" class="upload-btn">選擇文件</label>

3. 在CSS中添加上述代碼，即可實現一個樣式漂亮的上傳圖片按鈕。