html - <输入类型 ="file"> 问题

Question

我正在尝试制作一个由一个文本类型的输入字段和另一个文件类型的输入字段组成的表单。问题是文件的浏览 按钮显示在输入框内。我不希望按钮位于输入框内。我附上截图。请帮帮我。

这是代码片段。

<form class="form-inline fonts-calibri" action="" enctype = "multipart/form-data">
      <div class="form-group">
        <label for="oid">Purchase Order No. </label>
        <input type="text" class="form-control" id="oid" placeholder="Enter PO number" name="oid">
      </div>
      <div class="form-group pull-right" style="margin-right : 15%;">
        <label for="file">Upload PO </label>
        <input type = "file" class="form-control" id="file" name = "file" size = "50"/>
        <span><button type="submit" class="btn btn-default" id="upload-button"><span class="fa fa-upload"></span></button></span>
     </div>             
</form>

Answer 1

框是由form-control类生成的，只需使用下面的代码就可以去掉框

<input type = "file" id="file" name = "file" size = "50"/>

如果您需要添加一些样式，您仍然可以添加一些其他类。

更新: 如果你需要表单控件类，那么你可以添加一些类给它

class="form-control test"

像这样去掉里面的form-control的框效果，

.form-control.test {
    border: none !important;
    outline: none !important;
}