表单元素美化之fils美化

作为前端人员表单是经常会遇到这样的状况，设计给的效果图的表单做的很漂亮。但是基于表单的很多默认样式很多人肯定也是束手无策了。接下来我就给大家分享一下我的美化方法，其核心思想就一个你肯能一看就懂。（顺便加了几个你可能没用过的几个file属性，一起来看看吧！）

效果展示：

样式1：

/*j_filestyle1*/
.j_upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
display:block;
margin:30px auto;
text-align:center;
}

.j_upload  input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
text-align:center;
}

.j_upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}

　　样式2：

/*j_filestyle2*/
.j_file {
box-shadow:0px 6px 3px  #aaa;
position: relative;
display: inline-block;
background:#398;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
display:block;
margin:30px auto;
text-align:center;
}
.j_file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.j_file:hover {
box-shadow:0px 6px #666;
background:#396;
text-decoration: none;
}

　html代码：

<form action="" method="post">
<h3>单张图片上上传</h3>
<span class="j_upload">
<input type="file"  accept="image/jpeg,image/png,image/gif"  name="" >上传头像
</span>

<h3>单张图片指定格式上传（jpg，png,gif）</h3>
<span class="j_upload">
<input type="file"  accept="image/jpeg,image/png,image/gif"   name="" >上传头像
</span>

<h3>多张图片指定格式上传（jpg，png,gif）</h3>
<span class="j_upload">
<input type="file"  accept="image/jpeg,image/png,image/gif" multiple="multiple"  name="" >上传头像
</span>

<h3>多个word文件上传</h3>
<span  class="j_file">选择文件
<input type="file" name="" accept="application/msword,"  multiple="multiple"  >
</span>
</form>