不使用js实现文件选择input的样式优化

第一步假的文件选择的假按钮

<span class="btn btn-default btn-file">
     Browse <input type="file">
 </span>

第二步css样式定义

思路是， input在span标签里，此时将input设为透明（看不到），高和宽做成和span一样的大小， 所以我们点击span时，其实点击的你看不到的透明的input 按钮。

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

其实这时候就已经可以了。但是用户选择文件后，没有得到反馈，比如我选择了什么文件等等。 这时候就只能通过js代码来获取到用户选择的文件名称或者数量，并显示反馈到前端告诉用户选择了什么内容。

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

此篇文章已被阅读3462 次