如何将 MDL 按钮样式应用于文件选择器?
Posted
技术标签:
【中文标题】如何将 MDL 按钮样式应用于文件选择器?【英文标题】:How to apply MDL button style to a filePicker? 【发布时间】:2016-03-16 15:34:57 【问题描述】:我想知道是否有办法将 Material Design Lite 按钮样式应用于文件选择器,即通过以下方式在 html 页面上创建的组件:
<input type="file" id="filePicker" />
我希望组件的“浏览”按钮具有凸起按钮的外观(如果可能,带有波纹)。见http://www.getmdl.io/components/#buttons-section。
谢谢!
【问题讨论】:
【参考方案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/
【讨论】:
感谢您的回答。您的答案的“问题”是它隐藏了已选择的文件的名称。我试图删除样式,但随后我们得到了两个按钮(原始按钮和样式按钮)。仅供参考,我更多的是考虑一个矩形按钮( )但它没有对您的回答没有任何影响。 或许我们可以在 JS 中捕获选中的文件名,并显示在下面的另一个占位符中。 是的,可以通过将您的建议与“标签”标签的样式和此处介绍的技术html5rocks.com/en/tutorials/file/dndfiles 相结合来显示文件列表【参考方案2】:目前,没有“官方”的方式来做到这一点。根据this issue 上的讨论,原因是该组件没有材料设计规范,因此他们没有样式指南。在同一页面上,用户 kybarg 提供了 a CSS/javascript code 来设置与 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 按钮样式应用于文件选择器?的主要内容,如果未能解决你的问题,请参考以下文章