CSS - Pseudo-element - ::file-selector-button

Quiz

The ::file-selector-button pseudo-element is a representation of a button of an <input> of type="file". It basically opens up the file selection pop-up, on the click of the button.

Since the pseudo-element ::file-selector-button is a complete element in itself, the fonts and colors may not be inherited from the <input> element.

Syntax

input[type="file"]::file-selector-button {
   /* ... */
}

CSS ::file-selector-button Example

Here is an example to show a simple usage of ::file-selector-button pseudo-element:

<html> 
<head>
<style>
    body {
        display: block;
        height: 100vh;
        margin: 0;
        }

    input::file-selector-button {
        background-image:url(images/border.png);
        background-size: 200%;
        border: 2px solid black;
        border-radius: 8px;
        font-weight: 600;
        color: rgb(6, 1, 9);
        padding: 15px;
        transition: all 0.25s;
    }
</style>
</head>
<body>
    <h2>Select a file</h2>
    <input type="file">
</body>
</html>

Print Page