Html 在#shadow root下创建的输入元素，无法设置其样式

我正在尝试使用引导设置

输入[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中的位。当我尝试检查元素时，会出现2个输入元素，1个在DOM中，1个在#shadow root中。当我检查这两个元素时，看起来是这样的：


另一个输入显然位于该元素的顶部，其游标属性设置为
default
，因此我的游标属性实际上不适用于我创建的元素，因为它位于这个#shadow根元素下。如何解决此问题？发生了什么事？
它在所有浏览器中的工作方式都不同，因为文件输入类型非常特殊

你用什么浏览器

您应该使用带有输入文本的普通按钮并使用jquery创建文件输入。
它在所有浏览器中的工作方式都不同，因为文件输入类型非常特殊

你用什么浏览器

您应该使用带有输入文本的普通按钮并使用jquery创建文件输入。
我正在使用Google Chrome。尝试使用以下小技巧：我正在使用Google Chrome。尝试使用以下小技巧：
#sample-photo {
    font-size: 20px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}