默认的input[type=file] 是不太好看的,通过css修改默认的样式
<a class="a_pic" href="javascript:void(0);"> <span><em>+</em>添加图片</span> <input class="file_review" title="支持jpg、jpeg、gif、png格式" name="pic"> </a>
加上css样式
*{margin:0;padding:0;} a{text-decoration:none !important;} .a_pic{ display: block; position: relative; width: 140px; height: 39px; overflow: hidden; border: 1px solid #EBEBEB; background: none repeat scroll 0 0 #F3F3F3; color: #999999; cursor: pointer; text-align: center; } .a_pic span{display: block;line-height: 39px;} .a_pic em { background:url(./images/add.png) 0 0; display: inline-block; width: 18px; height: 18px; overflow: hidden; margin: 10px 5px 10px 0; line-height: 20em; vertical-align: middle; } .a_pic:hover em{background-position:-19px 0;} .file_review { display: block; position: absolute; top: 0; left: 0; width: 140px; height: 39px; font-size: 100px; /* 增大不同浏览器的可点击区域 */ opacity: 0; /* 实现的关键点 */ filter:alpha(opacity=0);/* 兼容IE */ }
原创文章,转载请注明: 转载自HSBLOG
本文链接地址: css美化input[type=file]样式