样式化asp文件上传浏览按钮

我有一个具有某种风格的asp按钮.但是当我将相同的样式应用于asp文件上传控件时,只有背景更改为该样式.浏览按钮仍然相同.

Asp代码是

    Please Select Excel File: 
      
    
 

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应用于"上传"按钮中的"浏览"按钮.有什么建议？

EDIT1任何纯CSS的方式吗？

input[type=file]跨浏览器可靠地设计风格非常困难.唯一的跨浏览器解决方案是@Vitorino演示的解决方案,使用label和/或伪元素隐藏实际input,然后替换元素/伪元素.

这个答案不重复,但提供了一个纯粹的CSS替代方案,它取决于浏览器.也就是说,这不应该在生产网站中使用,这只是一个概念验证或演示.

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

自定义扩展程序:

具体来说,input[type=file]至少Trident(适用于IE-10及以上版本)和Webkit(适用于Chrome,Safari)允许在某种程度上对此元素进行样式设置,而无需使用隐藏元素或绝对定位的伪元素等黑客攻击.对于这种情况,我们感兴趣的特定于供应商的扩展是:

-webkit-appearance (在基于Webkit的浏览器中启用用户代理样式的覆盖)

::-webkit-file-upload-button(在Webkit浏览器中启用浏览按钮的样式)

::-ms-browse(在基于Trident的浏览器中启用浏览按钮的样式,即IE)

::-ms-value (在Trident浏览器中启用文本输入样式,即IE)

警告:

不幸的是,-moz-在基于Gecko/Mozilla的浏览器中没有扩展.具体来说,至少Firefox根本不允许设置浏览按钮.

IE不允许从右向左更改浏览按钮的位置.有待进一步验证,或许它是-ms-flex用来控制的吗？

演示:

示例小提琴: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;  }

    Select File: