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

我对这个问题有一个描述。给定html

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

---

但按钮样式仍在显示。

您无法设置阴影DOM的样式。您可以通过隐藏

输入

和使用

标签

来获得相同的效果

---

如前所述，您的小提琴分叉工作。

要选择该按钮，您可以使用选择器

。文件放置：：-webkit文件上载按钮

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

---

正如您的问题所暗示的，这只适用于

-webkit

浏览器，因为每个浏览器都有自己的实现。

关于如何设计不同的

输入[type=file]

这意味着支持有限，因为只有

webkit

浏览器才会被应用。

<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>

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

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

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

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