Materializecss文件输入按钮向右

Question

我想在materializecss中使用文件输入。来自网站的模板在左侧位置添加按钮，然后在右侧位置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 - Demo