文件上传器的样式问题

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。