Question

我正在为表单类型创建一个css模板，并希望为表单输入提供圆角边框。这适用于type = text但不适用于type = file（用于文件上载）。

我做错了什么？

.tempform input[type="text"] {
  -moz-border-radius: 10px;
}

.tempform input[type="file"] {
  -moz-border-radius: 10px;
}

<div class="tempform">
   <label for="textfield">Test Text Field</label>
   <input type="text" id="textfield" name="textfield"></div>
</div>

div class="tempform">
   <label for="filefield">Test File Field</label>
   <input type="file" name="filefield" id="filefield-0">
   <input type="file" name="filefield" id="filefield-1">
</div>

Answer 1

不幸的是，除了稍微改变宽度之外，不可能设置文件上传输入的样式。浏览器只是不允许任何其他更改。如果你想设置你的文件上传输入的样式，你将不得不使用一个讨厌的黑客，比如在图像上放置一个几乎不可见的文件上传输入（仅适用于某些浏览器），或像{{3}这样的JavaScript解决方案}。

Answer 2

根据the first Google search result，它相当复杂。有关如何执行此操作的信息，请参阅quirksmode.org上的this article。

样式输入类型=文件未按预期工作

2 个答案: