Editing file input style

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>file input style</title>
</head>

<body>
    <input type="file" multiple />
    <p>
        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button">https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button</a>
    </p>
</body>

</html>

input[type=file] {
    border: 1px solid #d4d4d8;
    border-radius: 0.25em;
    color: deeppink;
    padding: 0 1em;
    height: 38px;
}

input[type=file]::file-selector-button {
    border: none;
    height: 100%;
    width: auto;
    color: deeppink;
    background-color: transparent;
}