input file默认样式修改(input自定义file样式)

前端这点事 137 0

hi,大家好,现在我要对input[type="file"]的默认样式进行优化。

<input type="file" />

未优化前的样子:


优化后的样子:


优化后的代码:

.upload{
 padding: 4px 10px;
 height: 20px;
 line-height: 20px;
 position: relative;
 border: 1px solid #999;
 text-decoration: none;
 color: #666;
}
.change{
 position: absolute;
 overflow: hidden;
 right: 0;
 top: 0;
 opacity: 0;
}
<a href="javascript:;" class="upload">选择文件
 <input class="change" type="file" multiple="multiple" />
</a>


标签: CSS

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~