【更改表单元素默认样式】更改自定义文件上传按钮样式

虽然我们无法直接更改表单的input[type&＃61;file]按钮&＃xff0c;但是可以通过曲线救国的方式来实现。

思路大致是这样的&＃xff1a;

1、将按钮设置透明度为0

2、在上面覆盖一个button&＃xff0c;使二者位置完全重合&＃xff0c;这样就可以实现改变上传按钮的样式&＃xff0c;而不会影响上传功能。

HTML代码如下

<span class&＃61;"sl-custom-file"><input type&＃61;"button" value&＃61;"点击上传文件" class&＃61;"btn-file"/><input type&＃61;"file" class&＃61;"ui-input-file" />
span>

CSS代码

.sl-custom-file {position: relative;display: inline-block;zoom: 1;cursor: pointer;overflow: hidden;vertical-align: middle;}
.btn-file{background-color: #E95C33 !important;color: #fff !important;border: 1px solid #E95C33 !important;width: 150px !important;border-radius: 0 !important;
} .sl-custom-file .ui-input-file {position: absolute;right: 0;top: 0;_zoom: 30;font-size: 300px \9;height: 100%;_height: auto;opacity: 0;filter: alpha(opacity&＃61;0);-ms-filter: "alpha(opacity&＃61;0)";cursor: pointer;}