css美化input[type=file]样式

默认的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]样式