<input type="file" > 更改其中按钮的样式
时间: 2023-10-23 07:10:58 浏览: 43
你可以通过CSS来更改文件选择按钮的样式。具体实现方式如下:
1. 隐藏默认的文件选择按钮。
```css
input[type="file"] {
display: none;
}
```
2. 使用一个label元素来替代默认的按钮,并设置样式。
```css
label.upload-btn {
background-color: #3498db;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
label.upload-btn:hover {
background-color: #2980b9;
}
```
3. 将label元素与input元素进行关联,实现点击label元素时触发选择文件的功能。
```html
<label class="upload-btn" for="file-upload">选择文件</label>
<input id="file-upload" type="file">
```
完整的HTML和CSS代码如下:
```html
<label class="upload-btn" for="file-upload">选择文件</label>
<input id="file-upload" type="file">
<style>
input[type="file"] {
display: none;
}
label.upload-btn {
background-color: #3498db;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
label.upload-btn:hover {
background-color: #2980b9;
}
</style>
```