不对 他们的大小不一样 选择文件的背景比按钮更小
时间: 2024-04-21 08:22:24 浏览: 22
如果你想要选择文件的背景比按钮更小,可以通过以下代码来实现:
HTML代码:
```html
<div class="file-upload">
<input type="file" id="myFileInput" style="display: none;">
<label for="myFileInput" class="custom-file-upload">选择文件</label>
</div>
```
CSS代码:
```css
.file-upload {
position: relative;
display: inline-block;
}
.custom-file-upload {
position: absolute;
top: 0;
left: 0;
width: 130px; /* 与按钮相同的宽度 */
height: 30px; /* 与按钮相同的高度 */
line-height: 30px;
padding: 6px 12px;
background-color: #f0f0f0; /* 背景色 */
color: black; /* 文字颜色 */
border: none;
border-radius: 3px;
cursor: pointer;
}
.custom-file-upload:hover {
background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
}
```
通过将文件上传按钮包裹在一个容器中,我们可以使用绝对定位来控制选择文件按钮的大小和位置,使其与按钮一样大小。你可以根据需要调整按钮的宽度、高度、背景色和其他样式属性。
希望这次能满足你的需求!如果还有其他问题,请随时提问。
相关推荐
![crx](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)