如何使用 CSS3 和 JavaScript/jQuery 设置输入文件控件的样式？

使用 CSS3 和 JavaScript/jQuery 设置输入文件控件的样式

尽管具有固有的功能，但输入文件控件在视觉吸引力方面通常不足。 CSS3 对此元素的样式设置功能有限，但在 JavaScript 或 jQuery 的帮助下，您可以增强其外观并使其符合您的设计。

使用 CSS 改善按钮外观

虽然 CSS3 本身无法改变输入文件按钮的基本外观，但它可以用来影响其容器。例如，您可以为包围的 div 定义自定义背景颜色或边框半径：

.input-file-container {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

使用样式化的 Div 打开浏览对话框

或者，您可以创建一个视觉上吸引人的 div ，单击时会触发文件浏览对话框。操作方法如下：

HTML
创建一个隐藏的输入文件元素和一个将充当可点击按钮的样式化 div。

<div>
<p><strong>CSS </strong><br>将 div 设置为类似于</p>
<pre class="brush:php;toolbar:false">#file-button {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

JavaScript/jQuery
将事件处理程序绑定到 div 以在单击时打开文件浏览对话框。

$('#file-button').click(function() {
  $('#file-input').click();
});

此方法在输入文件控件的样式方面提供了更大的灵活性，并允许您将其与整体设计美学相匹配。