-webkit-file-upload-button css implementation for firefox

Question

I have css implementation for <input type="file"> which styles the button and this is my code:

::-webkit-file-upload-button {
            cursor: pointer;
            margin-top: 25px;
            display: inline-block;
            padding: 6px;
            padding-right: 29px;
            padding-left: 29px;
            transition: all 1s ease;
            color: @darkGray;
            text-transform: capitalize;
            font-size: 15px;
            z-index: 1;
            position: relative;
            border-radius: 25px;
            background-color: transparent;
            border: 2px solid @red;
}

But this only works on Chrome and I would like to know how would I do it for other browsers?

Answer 1

There's a standard ::file-selector-button pseudo-element now, see https://github.com/w3c/csswg-drafts/issues/5049. Firefox supports it, and future versions of Safari and Chrome will too.