javascript - 文件上传器的样式问题

Question

我有一个文件上传按钮，有一个奇怪的样式问题，我似乎无法解决。生成的 HTML 如下：

<div id="uniform-file_upload" class="uploader">
<input id="file_upload" type="file" multiple="multiple" name="file_upload" size="55" style="opacity: 0;">
<span class="filename" style="-moz-user-select: none;">No file selected</span>
<span class="action" style="-moz-user-select: none;">Choose File</span>
</div>

输出如下：

你能看到“选择文件”字样周围的小框吗？嗯，它非常丑陋和分散注意力，我认为摆脱它应该很容易，但我做不到。

Answer 1

在这种情况下，一个很好的调试技巧是使用 Chrome 网络浏览器并尝试检查元素选项。右键单击表单按钮（在您的网页中）并选择“检查元素”（FireFox 有类似的东西，但我更喜欢 Chrome 那个）

按钮的样式信息显示在侧面板上，您可以调整样式以获得所需的效果。

注意：确认您在单击检查元素后在元素选项卡部分中选择了正确的 html 标记。此外， element.style {...} 是侧面板中的一个选项，它允许您编辑所选 html 元素的内联 css。