css - -webkit-file-upload-button Firefox 的 CSS 实现

Question

我有 <input type="file"> 的 css 实现按钮的样式，这是我的代码:

::-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;
}

但这只适用于 Chrome，我想知道如何在其他浏览器上执行此操作？

Answer 1

现在有一个标准的 ::file-selector-button 伪元素，参见 https://github.com/w3c/csswg-drafts/issues/5049 . Firefox 支持它， future 版本的 Safari 和 Chrome 也会支持。