Question

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

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

 <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

如何删除“选择文件”＆amp;＆amp; “没有选中任何文件”。我只想要一个打开文件资源管理器的简单按钮。

谢谢！

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

Answer 2

您无法修改输入[type = file]。

但您可以隐藏此输入并修改标签。

＆＃13;

$other_hour_trade = DB::table('finaltrade')
    ->join('exchanges', 'finaltrade.exchange_id', '=', 'exchanges.id')
    ->select('finaltrade.*')
    ->where('finaltrade.user_id', $user_id)
    ->whereRaw("finaltrade.created_at NOT BETWEEN exchanges.start_time AND ADDTIME(exchanges.start_time, '01:00:00')")
    ->whereRaw("finaltrade.created_at NOT BETWEEN exchanges.close_time AND SUBTIME(exchanges.close_time, '01:00:00')")
    ->get();

＆＃13;

/* 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;
}

＆＃13;

禁用默认表单样式

2 个答案: