type=file 美化
时间: 2023-08-29 20:13:40 浏览: 52
要美化 type=file 的样式,可以使用 CSS 和 JavaScript 实现。以下是一个简单的例子:
HTML 代码:
```html
<label for="file-input" class="custom-file-upload">
Choose File
</label>
<input type="file" id="file-input"/>
```
CSS 代码:
```css
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
#file-input {
display: none;
}
```
JavaScript 代码:
```javascript
const fileInput = document.getElementById("file-input");
const customFileUpload = document.querySelector(".custom-file-upload");
customFileUpload.addEventListener("click", function () {
fileInput.click();
});
```
这段代码会将原本的文件上传按钮隐藏起来,而是在一个 `<label>` 元素上添加一个自定义的样式。当用户点击这个自定义的按钮时,会触发 `<input type="file">` 的点击事件,弹出文件选择窗口,用户可以选择需要上传的文件。
你可以根据自己的需要修改 CSS 样式以及 JavaScript 代码来实现更加符合自己需求的文件上传按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)