设置阴影 dom 按钮元素上的显示属性

Question

我有一个小提琴来描述这个问题。 给定的 html

<input type="file" name="geoFile" class="file-drop" >

这反过来又生成以下影子 DOM 结构：

<input type="file" name="geoFile" class="file-drop">
    #shadow-root (user-agent)
        <input type="button" value="Choose File" pseudo="-webkit-file-upload-button">
            #shadow-root (user-agent)
                Choose File
        </input>
</input>

如何设置第一个shadow-root内按钮的display:none？

我试过了

.file-drop {
    width: 150px;
    height: 150px;
    border: 5px dashed darkgrey;
    input[type='button'] {
        display: none;
    }
}

但按钮样式仍在显示。

Answer 1

若要选择该按钮，可以使用选择器 .file-drop::-webkit-file-upload-button 。

由于您使用的是 SASS，因此它将是：

更新的示例

.file-drop {
    width: 150px;
    height: 150px;
    border: 5px dashed darkgrey;
    &::-webkit-file-upload-button {
      display: none;
    }
}

正如您的问题所暗示的那样，这仅适用于-webkit浏览器，因为每个浏览器都有自己的实现。

Answer 2

您不能设置影子 DOM 的样式。您可以获得相同的效果，隐藏input并使用带有冥河的label。

在这里，您的小提琴分叉如前所述。