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.test {
    border: none !important;
    outline: none !important;
}

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

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

class =“form-control test”

就像这样，并删除其中的表格控件的框效果，

{{1}}

Answer 2

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

查看下面的摘录！

＆＃13;

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

＆＃13;

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

＆＃13;

<input type =“file”/>

2 个答案: