Set display property on shadow dom button element

Question

I have a fiddle describing this issue. Given the html

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

which in turn generates the following shadow dom structure:

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

How can I set display:none to the button inside the first shadow-root?

I've tried

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

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

but the button style is still showing.

Answer 1

To select the button, you could use the selector .file-drop::-webkit-file-upload-button.

Since you're using SASS, it would be:

Updated Example

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

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

As your question implies, this only applies to -webkit browsers since each browser has their own implementation.

Answer 2

You can't style the shadow DOM. You could obtain the same effect hiding the input and using a label with your stykles.

Here your fiddle forked working as explained before.