<input type="file"> 的问题答案

【问题标题】：Issue with <input type="file"><input type="file"> 的问题
【发布时间】：2017-11-26 14:45:52
【问题描述】：

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

这里是代码sn-p。

<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>

【问题讨论】：

标签： html forms twitter-bootstrap css file-upload

【解决方案1】：

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

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

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

更新：如果你需要表单控制类，那么你可以添加一些类到它

class="表单控制测试"

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

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

【讨论】：

移除form-control类后问题得到解决，但标签、浏览和上传按钮没有排成一行。它们排列为一个在另一个之下。请帮忙

【解决方案2】：

您需要从<input type="file" /> 中删除.form-control 类，因为该类正在制作您不想要的框...！

看看下面的sn-p！

.form-group.pull-right input {float: left;}
span {float: left;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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><div class="clearfix"></div>
        <input type = "file" 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>

【讨论】：

谢谢。删除表单控件类后问题得到解决，但标签、浏览和上传按钮没有排成一行。它们排列为一个在另一个之下。请帮忙
将float: left; 添加到您想要内联的所有元素中......！