Question

我正在尝试使用Bootstrap设置input[type='file']元素的样式。这是我的代码：

<div class="input-group">
    <span class="input-group-btn">                          
        <span class="btn btn-default">
            <span class="glyphicon glyphicon-folder-open"></span>
            Browse 
            <input type='file' id='sample-photo'>
        </span>                         
    </span>
    <input type="text" class="form-control" disabled='disabled'>
</div>

并使用以下CSS设置样式：

#sample-photo {
    font-size: 20px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

我的CSS中cursor: pointer;位的所有内容都非常漂亮，除了。当我尝试检查元素时，会出现 2 输入元素，DOM中为1，＃shadow-root中为1。当我检查这两个元素时，它看起来像是这样：

http://imgur.com/a/IswKD

还有另一个输入明显位于此元素之上，并且其cursor属性设置为default，因此我的cursor属性实际上不适用于我创建的元素，因为它位于此＃下阴影根元素。我该如何解决这个问题？发生了什么事？

Answer 1

它在所有浏览器中的工作方式不同，因为文件输入类型非常特殊。

您使用什么浏览器？

您应该使用带有输入文本和使用jquery的普通按钮创建文件输入。

在＃shadow-root下创建的输入元素，无法设置样式

1 个答案: