Материализация css fileinput кнопка справа

Question

Я хотел бы использовать файл ввода в материализации css. Шаблон с веб-сайта добавляет кнопку в левой позиции, а затем текстовое поле в правой позиции https://www.tutorialspoint.com/materialize/materialize_file.htm.

Я хотел бы поменять местами позиции этих элементов - текстовое поле, а затем кнопку , Можно ли это изменить?

Answer 1

Все, что вам нужно сделать, это проверить и изменить вещи согласно вашему требованию.

HTML

<div class = "row">
  <div class = "file-field input-field">
    <div class = "btn">
      <span>Browse</span>
      <input type = "file" multiple />
    </div>

    <div class = "file-path-wrapper">
      <input class = "file-path validate" type = "text"
             placeholder = "Upload multiple files" />
    </div>
  </div>    
</div>

CSS

.file-field{
  display: flex !important;
  flex-direction: row-reverse !important;
}

.file-path-wrapper{
  width: 100%;
}

Codepen - Демо