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

以下是如何为“文件”输入类型实现自定义样式：https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

Answer 2

大多数人告诉您完全放弃按钮的使用，而使用另一个按钮来激活文件选择器上的click();功能。

但是，正如您所发现的那样，这可能很快就会过时。您在IE（v10及更高版本）上所做的操作等效于以下方式：

input[type="file"]::-ms-browse {
    background-color: #ffffff00;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

input[type="file"]::-webkit-file-upload-button {
    background-color: #ffffff00;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

<input type="file"/>

有两个最重要的原因让您继续朝自己的方向前进

更少的黑客，如果现在可以简化一点，为什么还要加倍努力呢？
在Chrome和FF上，文件选择器自动成为放置目标，这增加了巨大的可用性价值。

现在，我仍在研究如何使按钮3d阴影消失，因此我可以使按钮不可见，而仅保留简单的放置目标字段。

Answer 3

样式化文件输入非常困难，因为大多数浏览器都不会改变css或javascript的外观。

您可以通过标签传递点击事件，并以您想要的任何方式设置标签样式。

<label id="add-computer-button" for="fileupload">Add from computer

<input id="fileupload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

以下是演示：https://jsfiddle.net/dinesh_feder/jww69rnf/

firefox的-webkit-file-upload-button css实现

3 个答案: