问题与<input type =“file”>

我想使一个表单由一个文本类型的输入字段和其他文件类型组成。问题在于输入框内显示文件按钮。我不希望按钮在输入框内。我附上截图。请帮助我。问题与<input type =“file”>

这是代码片段。由表单控制类生成

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

来源

2017-06-23 Joginder Pawan

的框，只需使用下面的代码删除盒

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

你仍然可以添加一些其他的类，如果你需要添加一些造型。

更新：如果您需要表单控件类，然后你可以添加一些类，它

类=“的形式控制试验”

像这样和删除在它的形式，控制箱效应，

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

来源

2017-06-23 06:25:02 Prateek

问题移除形式控制下课后是固定的，但标签，浏览和上传按钮不一行的到来。它们彼此对齐。请帮助 –

您需要从<input type="file" />删除.form-control类，因为这班正在制作你不想要的盒子......！

看下面的代码片段！

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

来源

2017-06-23 06:37:24

谢谢。 \t 删除表单控件类后，问题得到修复，但标签，浏览和上传按钮不在一行中。它们彼此对齐。请帮忙 –

将'float：left;'添加到你想要内联的所有元素..！ –

问题与<input type =“file”>

回答

相关问题