如何对齐输入类型文件

Question

我有以下代码：

Select a picture: <input name="userfile" type="file" />

我得到了这个结果：

我想同时拥有＆＃34;选择图片＆＃34;文本和输入在同一行（左右）不是上下。

另外，我无法弄清楚＆＃34;没有选择文件的位置＆＃34;文字来自。我很乐意删除该文本。

提前谢谢

Answer 1

您在文件输入按钮上使用CSS可以做的事情是有限的。我已经制作了一个jQuery插件，可以让你使用常规按钮作为文件输入字段，你可以根据自己的意愿完全设置样式。

在Github上查看。

$("#mybtn").fileUpload(); 

这是fiddle。

我知道你没有标记jQuery或Javascript，但就像我说的那样，CSS在文件输入类型的样式设置方面受到限制。

Answer 2

要删除“未选择文件”，请使用以下css

input{
  width: 80px;
  overflow: hidden;
  }

谢谢，

Answer 3

好吧，对于文本和输入垂直对齐的问题，我找到了一个基本的解决方案。只需使用表格：

<table><tr><td><font style="font-size: 3vh; color:grey">Select a picture: </td>
           <td><input name="userfile" type="file" accept=".jpg, .png, .jpeg"/></font></td>     </tr>
</table>