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

Life is short , play more!
本文来自lihao's Blog,转载请注明。

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

<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/


一条评论

  1. zengda说道:

    不错,不错,看看了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注