Отключить стиль формы по умолчанию

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

Как удалить «выбрать файл» && «файл не выбран».Я просто хочу простую кнопку, которая открывает проводник.

Спасибо!

Answer 1

Вы не можете изменить ввод [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>

Answer 2

Вам нужно что-то вроде этого:

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