php文件上传按钮美化,CSS美化input上传按钮并显示上传文件路径信息(兼

网上也有很多类似的文章，但很多也只是美化一下按钮而已;

默认的上传按钮在后面会显示上传文件名，若按照网上的教程美化后文件名信息就看不到了;体验较差。

以下代码结合网上方案完善而来，并兼容IE等各大浏览器。

美化前后对比图：

CSS代码：.file{

position:relative;

display:inline-block;

background:#D0EEFF;

border:1px solid #99D3F5;

padding:5px 20px;

border-radius:4px;

overflow:hidden;

color:#1E88C7;

text-decoration:none;

text-indent:0;

line-height:20px;

}

.file input{

position:absolute;

/* 防止在各浏览器中上传按钮的显示不同,给上传按钮设置文字大小 */

font-size:100px;

/* 解决IE中无法靠近边缘问题 */

right:-5px;

top:-5px;

/* 设置透明度为0,针对非IE浏览器或高版本IE浏览器*/

opacity:0;

/* 设置透明度为0,这里针对低版本IE浏览器 */

filter:alpha(opacity=0);

cursor:pointer;

}

.file:hover{

background:#AADFFD;

border-color:#78C3F3;

color:#004974;

text-decoration:none;

}

#textId{

width:180px;

height:30px;

border:1px solid #f1f1f1;

border-radius:4px;

vertical-align:top;

}

HTML:

默认上传按钮

美化后的上传按钮

选择文件