网页中文件上传 input 标签 type=“file“ 设置中间按钮 button的样式

作者：System 时间：2024年08月13日分类：所有,css3 字数：700

要为文件上传的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。这样就可以实现一个自定义样式的文件上传按钮。

网页中文件上传 input 标签 type=“file“ 设置中间按钮 button的样式

评论已关闭

推荐阅读