如何将材料设计应用于文件输入标签？

Posted 2023-02-18

【中文标题】如何将材料设计应用于文件输入标签？

【英文标题】：how to apply a material design to file input tag?

【发布时间】：2017-07-24 20:16:42

【问题描述】：

我正在使用谷歌的材料设计精简版设计一个网站，在我的主页上我有一个文件输入标签

    <input type="file">

问题是我找不到合适的 mdl 类来设置这个元素的样式

【参考方案1】：

这里有一个例子给你一个想法：

<style>#file  display: none; </style>
<label class="mdl-button mdl-js-button mdl-button--icon mdl-button--file">
  <i class="material-icons">attach_file</i><input type="file" id="file">
</label>

它使用一个MDL图标作为一个按钮，供用户单击以拉出文件输入提示。