asp.net - 样式asp文件上传浏览按钮

Question

我有一个具有特定样式的 asp 按钮。但是当我将相同的样式应用于 asp 文件上传控件时，只有背景更改为该样式。浏览按钮仍然是一样的。

ASP代码是

<div>
    Please Select Excel File: 
    <asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />&nbsp;&nbsp;
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
 </div>

CSS 是

.addkey_btn {
    background: none repeat scroll 0 0 #00B7CD;
    border: 0 none;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Altis_Book';
    font-size: 15px;
    padding: 3px 15px;
}

我想将与上传按钮相同的 CSS 应用于浏览按钮。有什么建议吗？

编辑1有什么纯 CSS 方法可以做到这一点吗？

Answer 1

跨浏览器可靠地设置input[type=file]样式非常困难。唯一的跨浏览器解决方案是 @Vitorino 演示的，使用 label 和/或伪元素来隐藏实际的 input，然后设置该元素/伪元素的样式相反。

这个答案没有重复，但提供了一个依赖于浏览器的纯 CSS 替代方案。也就是说，这不应该在生产网站中使用，这只是一个概念验证或演示。

现代浏览器正在实现一些非标准的扩展，以实现迄今为止几乎不可能的元素功能的用户样式化。这允许开发人员在很大程度上覆盖默认的用户代理样式表。

自定义扩展:

具体来说，对于 input[type=file] 至少 Trident(适用于 IE-10 及更高版本)和 Webkit(适用于 Chrome、Safari)允许在某种程度上设置此元素的样式，而无需求助于 hack例如隐藏元素或绝对定位的伪元素。对于这种情况，我们感兴趣的特定于供应商的扩展是:

1. -webkit-appearance(在基于 Webkit 的浏览器中启用用户代理样式的覆盖)
2. ::-webkit-file-upload-button(启用 Webkit 浏览器中浏览按钮的样式)
3. ::-ms-browse(在基于 Trident 的浏览器(即 IE)中启用浏览按钮的样式)
4. ::-ms-value(在 Trident 浏览器(即 IE)中启用文本输入样式)

注意事项:

1. 不幸的是，基于 Gecko/Mozilla 的浏览器中没有用于此目的的 -moz- 扩展。具体来说，至少 Firefox 根本不允许设置浏览按钮的样式。
2. IE 不允许将浏览按钮的位置从右更改为左。有待进一步验证，或许是用-ms-flex来控制的？

演示:

fiddle 示例:http://jsfiddle.net/abhitalks/hxv19bbg/7/

示例片段:

以下代码片段可以在 IE-10/11 和 Chrome-39(这是我测试过的)中完美运行，但不适用于 Firefox。

* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
    display: inline-block;
    background-color: #eee;
    border: 1px solid gray;
    font-size: 15px; padding: 4px;
}
input[type=file] + input {
    padding: 13px;
    background-color: #00b7cd;
}
::-webkit-file-upload-button {
    -webkit-appearance: none;
    background-color: #00b7cd;
    border: 1px solid gray;
    font-size: 15px; padding: 8px;
}
::-ms-browse {
    background-color: #00b7cd;
    border: 1px solid gray;
    font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none;  }

<div>
    <label>Select File: </label>
    <input id="browse" type="file" />
    <input class="btn" type="button" value="Submit" />
</div>