Bootstrap输入框组组件如何处理type="file"的input标签

[muzine1995]

最近在写一个弹幕墙，中途一时兴起想加入一个能从本地读文件播放的功能，但是type="file"的input默认样式实在是很难看，而且BS的输入框组也不能很好兼容。之后查了一些资料，通过隐藏input然后与一个<a>标签重叠的方式进行了美化，但是这样又遇到了新的问题：<a>标签中的文字不知道为什么不可见，我也尝试过在<a>标签之后新加入了一个<p>标签重新输入文字并通过绝对定位覆盖到<a>标签之上的方式，但是依旧无法解决不可见的问题，请问一下需要怎么样才能让type=“file”的input标签比较好地和BS输入框组结合到一起呢？

            <div class="input-group con" role="group">
                <span class="input-group-btn left">
                    <a class="file">选择文件<input type="file" id="file" onchange="selectFile()"></a>
                </span>            
                <input type="text" class="form-control input" placeholder="弹幕发送(゜-゜)つロ 干杯~">
                <span class="input-group-btn right">
                    <button class="btn btn-info send" type="button">发送弹幕</button>
                    <button class="btn btn-info clear" type="button">清除弹幕</button>
                </span>
            </div>

        div.con {
            overflow: hidden;
            width: 60%;
            margin: auto;
        }
        span.left {
            position: relative;
            z-index: 0;
        }
        .file {
            display: inline-block;
            height: 34px;
            width: 80px;
            background-color: #5bc0de;
            border: 1px solid #46b8da;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: white;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            z-index: 1;
            opacity: 0;
        }
        .file:hover {
            background: #31b0d5;
            border-color: #269abc;
            color: white;
            cursor: pointer;
            text-decoration: none;
        }

[xiwanghope]

写了个label，把label的for属性写成input的id，然后设置input的display为none。你点label里面的文字，他就会弹出选择框了。样式问题你可以直接修饰label元素就行了。

[muzine1995]

引用 1 楼 xiwanghope 的回复:

写了个label，把label的for属性写成input的id，然后设置input的display为none。你点label里面的文字，他就会弹出选择框了。样式问题你可以直接修饰label元素就行了。

哇这个很方便，以前基本没用过label，没想到还有这个用处，谢谢！