样式化html文件输入按钮和“没有文件选择”文本

Question

我正在构建一个需要文件uplod的html表单。当我将文件上传部分工作时，我无法获得表单上传按钮和“没有文件选择”文本的样式。

我想要的标记是

有办法吗？

PS：请忽略绿色文字（“上传屏幕截图”）。我有那个工作。

按钮和“未选择文件”的当前行为位于同一行。

HTML代码：

 <div class="formField">
    <label for="fileToUpload">Upload a screen shot (optional) </label>
    <input type="file" name="fileToUpload" id="fileToUpload"/> 
 </div>

小提琴：http://jsfiddle.net/5tLokkjh/

Answer 1

您可以在标签后输入换行符：

＆＃13;

＆＃13;

<div class="formField">
  <label for="fileToUpload">Upload a screen shot (optional)</label><br />
  <input type="file" name="fileToUpload" id="fileToUpload"/> 
</div>

＆＃13;

＆＃13;

＆＃13;

但使用CSS会好得多：

＆＃13;

＆＃13;

label {
  display: block;
}

＆＃13;

<div class="formField">
  <label for="fileToUpload">Upload a screen shot (optional)</label>
  <input type="file" name="fileToUpload" id="fileToUpload" />
</div>

＆＃13;

＆＃13;

＆＃13;

在元素上设置display: block使其填充页面的整个宽度。