material-design - 如何将 MDL 按钮样式应用于文件选择器？

Question

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

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

我希望组件的“浏览”按钮具有凸起按钮的外观(如果可能，带有波纹)。见 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/