如何使用css在<input type =“file”/>中将“选择文件”移动到“无文件选择”的右侧

Question

我想知道是否有办法更改“选择文件”和“未选择文件”的位置，以便在“选择文件”之前显示“无文件选择”区域。我不想改变任何HTML，我只想改变CSS。

<input type="file" id="upload" name="files[submission_1]" size="22" class="form-file" />

这里是为了节省时间 http://jsfiddle.net/x8wCu/

Answer 1

不幸的是，这是不可能的，因为浏览器会决定如何显示它。

但是，您可以使用hack自定义它的外观。您基本上会隐藏文件输入，方法是将opacity设置为0，然后在其上放置div。

选中fiddle。