网页中 文件上传 input 标签 type=“file“ 设置 中间按钮 button的样式
要为文件上传的input标签设置自定义样式，并使其看起来像一个按钮，你可以隐藏原生的input元素，并为一个可见的button元素添加事件监听器，以触发文件上传。以下是一个简单的例子：
HTML:
<input type="file" id="fileUpload" style="display: none;" />
<button id="uploadButton">选择文件</button>CSS:
#uploadButton {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
#uploadButton:hover {
background-color: #0056b3;
}JavaScript:
document.getElementById('uploadButton').addEventListener('click', function() {
document.getElementById('fileUpload').click();
});这段代码会创建一个按钮，当用户点击时，它会触发隐藏的文件上传input。这样就可以实现一个自定义样式的文件上传按钮。
评论已关闭