禁用默认表单样式答案

【问题标题】：Disable default form style禁用默认表单样式
【发布时间】：2018-11-12 23:09:25
【问题描述】：

我根本不擅长前端，但有些情况让我学习了它。

在我的应用程序中，我需要上传文件。我做这样的事情

 <div class="modal-footer">
	<div class="col-md-12">
		<form action="" method="post" enctype="multipart/form-data">
			<div class="col-md-6">
				<input type="file" name="file" id="file" class="btn btn-primary btn-sm" display: block;
					   cursor: pointer />     
				<input type="submit" class="btn btn-primary btn-success btn-sm" style="margin-top: 10px; margin-right: 1500px" />
			</div>       
		</form>
	</div>         
	<button class="btn btn-primary" data-dismiss="modal" id="conventionClick">Apply changes</button>
</div>

但结果很糟糕。我需要摆脱这个

https://ibb.co/kBnmfy

如何删除“选择文件”&&“未选择文件”。我只想要一个打开文件资源管理器的简单按钮。

谢谢！

【问题讨论】：

Change the "No file chosen":的可能重复

标签： html forms css

【解决方案1】：

你需要这样的东西：

.upl-wrp {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 1px solid black;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upl-wrp input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

<div class="modal-footer">
    <div class="col-md-12">
	<form action="" method="post" enctype="multipart/form-data">
	    <div class="col-md-6">

<div class="upl-wrp">
    <button class=btn>Just a button to click</button>
		<input type="file" name="file" id="file" class="btn btn-primary btn-sm" display: block;
		cursor: pointer />
</div>
		<input type="submit" class="btn btn-primary btn-success btn-sm" style="margin-top: 10px; margin-right: 1500px" />
	    </div>       
	</form>
    </div>         
<button class="btn btn-primary" data-dismiss="modal" id="conventionClick">Apply changes</button>
</div>

【讨论】：

【解决方案2】：

您不能修改输入[type=file]。

但是你可以隐藏这个输入并修改标签。

/* Hide */
.custom-input {
  opacity: 0;
  position: absolute;
  left: -9999px;
  z-index: -1;
}

/* Customize */
.custom-label {
  font-size: 18px;
  width: 300px;
  text-align: center;
  padding: 8px 16px;
  border: 1px solid #aaa;
  font-family: Verdana;
}

body {
  margin: 30px;
}

<input type="file" name="file" id="file" class="custom-input" />
<label for="file" class="custom-label">Browse...</label>

【讨论】：