给上传文件的input控件“美容”
Posted Z&K
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了给上传文件的input控件“美容”相关的知识，希望对你有一定的参考价值。
在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。
demo:
html代码
1 <body> 2 <form action="" method="post" enctype="multipart/form-data"> 3 <a href="#" class="a-upload"> 4 <input type="file" name="file" id="file">点击这里上传图片</a> 5 </form> 6 </body>
css代码
1 <style> 2 .a-upload { 3 padding: 4px 10px; 4 width: 200px; 5 height: 30px; 6 box-sizing: border-box; 7 line-height: 20px; 8 position: relative; 9 cursor: pointer; 10 color: #888; 11 background: #fafafa; 12 border: 1px solid #ddd; 13 border-radius: 4px; 14 overflow: hidden; 15 display: inline-block; 16 *display: inline; 17 *zoom: 1; 18 top: 5px; 19 } 20 21 .a-upload input { 22 position: absolute; 23 font-size: 100px; 24 opacity: 0; 25 filter: alpha(opacity=0); 26 cursor: pointer; 27 width: 200px; 28 height: 30px; 29 left: 0; 30 top: 0; 31 } 32 33 .a-upload:hover { 34 color: #444; 35 background: #eee; 36 border-color: #ccc; 37 text-decoration: none 38 } 39 </style>
以上是关于给上传文件的input控件“美容”的主要内容，如果未能解决你的问题，请参考以下文章