MDUI中出现按钮（Button、Input等）样式错乱的解决方法

在使用MDUI制作Input按钮时使用了MDUI的“mdui-btn”、“mdui-ripple”类名，本来应该出现下图1所示效果，但是实际上却变成了很丑的默认样式（图2）。

以下为原代码：

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">文件名：</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="提交">
</form>

为了解决这一问题，我在MDUI的官方讨论群里寻求帮助，通过一位群友的帮助，最终实现了对该按钮的美化并保留了原本的功能。以下为该群友提供的方案：

<input type="text" size="20" placeholder="图片路径" name="upfile" id="upfile" />
<input type="button" value="浏览图片" onclick="path.click()" />
<input type="file" id="path" style="display: none;" onchange="upfile.value=this.value" />

可以看到，该方案是使用一个Button按钮和一个隐藏的Input按钮实现的，并且还增加了显示选取文件的目录功能。

通过隐藏Input按钮，使其不显示出来，避免了MDUI的类名对该按钮不起作用产生的默认样式，再通过一个显示在页面上的增加了MDUI类名的Button按钮去触发隐藏的Input按钮。

具体实现则是在Button按钮上增添了Onclick事件，通过Onclick事件中的JS的click()方法点击id为path的Input按钮，这样便间接实现了原有功能，同时又美化了外观。

此外，当Input按钮完成了文件选取的步骤后，又通过JS中的onchange()事件改变id为upfile的Input输入框的value值，这样便呈现出该文件在用户设备上的目录。

到了这里就清楚了，功能和外观已经全部实现了预期效果，美中不足的是显示文件目录的Input是可以点击更改的，虽然这并没有什么用，但是这无疑会误导用户产生不好的体验，因此我又对其进行了一番改造，使它适应了自己的需求。以下为改造后的代码：

<div class="mdui-chip"><span class="mdui-chip-title">上传图片（可选）</span></div>
<input type="file" id="file" name="file"style="display:none" onchange="filedir.value=this.value"> 
<div class="row">
<div class="mdui-col-xs-4">
<input type="button" value="浏览图片" onclick="file.click()">
</div>
<div class="mdui-col-xs-8">
<input type="text" size="20" placeholder="图片路径" disabled name="filedir" id="filedir">
</div>

我使用了disabled的属性来禁止用户输入显示文件目录的文本框，该属性是html默认提供的属性。同时我还使用了MDUI提供的网格布局来进行美化，而由于文本框占用了额外的高度，为了使按钮和文本框对齐，我只好用了一个<br>标签。同时我又增添了一个由MDUI提供的纸片组件来提示用户上传图片。以下是效果图：