Как удалить кнопку "Выбрать файл" из текстового поля?

Question

Как скрыть кнопку выбора файла внутри текстового поля, поскольку я использую другую кнопку для просмотра.

Если я дам type="File", кнопка "choose file"автоматически войти в мое текстовое поле. Код ниже:

 <div class="col-lg-6">
    <label>Select File</label>
    <input  type="file"  id="SelectFile" @*style="display: none;"*@ class="form-control  input-sm input-small input-inline" />
</div>
 <div class="btn-group">
     <button id="btnBrowse" name="btnBrowse" onclick="document.getElementById('SelectFile').click();"  class="btn btn-block btn-primary btn-flat"><span class="hide-on-mobile">Browse </span><i class="fa fa-search"></i></button>
 </div>

Изображение с кнопкой Выбрать файл

Я пытался дать *style="display: none;"*, это делает мое текстовое поле невидимым.

Изображение после применения стиля none:

Answer 1

Здесь вы можете удалить классы из входного файла и добавить их в свою метку, а затем добавить свойство 'hidden' или display:none к входному файлу

 <div class="col-lg-6">
    <label class="form-control  input-sm input-small input-inline" >Select File</label>
    <input  type="file" hidden  id="SelectFile"  />
</div>

Answer 2

Это поведение браузеров по умолчанию. Если вы все еще хотите это изменить, вы тоже можете это сделать. Пожалуйста, обратитесь по этой ссылке

Answer 3

Я думаю, ваш вопрос повторяется; Как убрать кнопку "Выбрать файл" из текстового поля?

Однако в своем CSS вы можете попробовать что-то вроде этого;

#SelectFile {
  padding: 36px 0 0 0;
}