设置阴影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>

如何将display:none设置为第一个shadow-root中的按钮

我试过了

.file-drop {
    width: 150px;
    height: 150px;
    border: 5px dashed darkgrey;

    input[type='button'] {
        display: none;
    }
}

但是按钮的样式还在显示。

Answer 1

你不能画影子DOM。您可以获得同样的效果隐藏input和使用label与您的风格。

这里你的小提琴叉子工作，如前所述。

Answer 2

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

既然你用的是SASS，就会是：

更新的例子

.file-drop {
    width: 150px;
    height: 150px;
    border: 5px dashed darkgrey;

    &::-webkit-file-upload-button {
      display: none;
    }
}

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