html 修改inputfile样式,input file修改默认样式

效果图：

HTML：

选择apk

CSS:

/*input flie css美化*/

.file { font-size:0.8em; position:relative; display:inline-block; background:#fe770a; border-radius:1em; padding:0.3em 1em; overflow:hidden; color:#fff; text-decoration:none; text-indent:0; cursor:pointer; }

.file input { position:absolute; font-size:100px; right:0; top:0; opacity:0; }

.file:hover { background:#ffa55d;color:#fff; text-decoration:none;}

.file span{ max-width:6em; overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; }

.fileerrorTip,.showFileName{ color:#fe0000; font-size:0.9em; padding:0 0 0 0.5em; }

.showFileName{ color:#fe770a; }

JS:

//上传文件

$(".file").on("change","input[type='file']",function(){

var filePath=$(this).val();

$(".file span").html(filePath);

if(filePath.indexOf("apk")!=-1 ){

$(".fileerrorTip").html("").hide();

var arr=filePath.split('\\');

var fileName=arr[arr.length-1];

$(".showFileName").html(fileName);

}else{

$(".showFileName").html("");

$(".fileerrorTip").html("这他妈是APK吗??").show();

return false

}

})

标签：em,filePath,color,text,默认,html,file,input

来源： https://www.cnblogs.com/comedy/p/13674268.html