如何美化inputfile浏览框，效果如下_html/css_WEB-ITnose

CSS

如何用css写出这样的效果呢 求高手帮帮忙

回复讨论(解决方案)

画一个方框和一个按钮

绑定按钮的点击事件为触发file的点击事件

把file的onchange事件返回的文件名称设置到第一个方框里

以jquery为例


$("#btn").bind("click", function(e){
$("#file").trigger("click");
return false;
});

$("#img-file").bind("change", function(){
//设置取到的文件名至第一个box
});

     file  *{margin:0;padding:0;}body{font-size:12px; color:#333;}.box{margin:100px auto; width:400px; overflow:hidden; zoom:1;}.i-txt{width:320px; height:28px; line-height:28px; border:1px solid #eaeaea; float:left;}.i-file{ position:absolute; opacity:0; width:100%; height:100%; left:0; top:0;}.btnbox{ position:relative; float:right; background:url(btn.jpg) no-repeat; width:60px; height:30px;}   
	 	


      
查看更多关于如何美化inputfile浏览框，效果如下_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112885