Question

我想知道是否有办法将Material Design Lite按钮样式应用于文件选择器，即通过以下方式在HTML页面上创建的组件：

<input type="file" id="filePicker" />

我想要＆＃34;浏览＆＃34;组件的按钮具有凸起按钮的外观（如果可能，带有纹波）。请参阅http://www.getmdl.io/components/#buttons-section。

谢谢！

Answer 1

使用CSS，你的意思是这样吗？

<style>#file { display: none }</style>

<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">+</i>
</label>

https://jsfiddle.net/sj838cLg/

Answer 2

目前，没有“官方”方式。根据{{3}}的讨论，原因是该组件没有材料设计规范，因此它们没有指导样式。在同一页面上，用户kybarg提供了this issue样式文件选择器，它与Material Design规范匹配，因此您可以使用该代码：

HTML：

<form>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" />
    <label class="mdl-textfield__label">Name</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text"/>
    <label class="mdl-textfield__label">Position</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
    <input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
    <div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
      <i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
    </div>
  </div>
</form>

CSS：

html {
  width: 100%;
}
body {
  background: #f5f5f5;
  margin: 50px auto;
  width: 512px;
}

.mdl-button--file {
  input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
  }
}

.mdl-textfield--file {
  .mdl-textfield__input {
    box-sizing: border-box;
    width: calc(100% - 32px);
  }
  .mdl-button--file {
    right: 0;
  }
}

JavaScript的：

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.files[0].name;
};

但由于没有官方规范，您可能暂时找不到MDL团队的正式实施。

如何将MDL按钮样式应用于filePicker？

2 个答案: