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

Question

我有一个 fiddle 描述了这个问题。鉴于 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 和您的 stykles 获得相同的效果。

Here 您的 fiddle 分叉工作如前所述。

Answer 2

要select按钮，您可以使用select或.file-drop::-webkit-file-upload-button。

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

Updated Example

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

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

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

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

Set display property on shadow dom button element

html

css

shadow-dom

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

Set display property on shadow dom button element

html

css

shadow-dom

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