样式化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）在某种程度上允许此元素的样式，而无需求助于隐藏元素或绝对定位的伪元素之类的技巧.对于这种情况，我们感兴趣的特定于供应商的扩展是：

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

注意事项：

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

演示：

小提琴示例：http://jsfiddle.net/abhitalks/hxv19bbg/7/

示例片段：

以下 sn-p 在 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>

Answer 2

您可以设置label 的样式并将其放在选择文件按钮的顶部

.btn,
label.choose:before {
  background: none repeat scroll 0 0 #00B7CD;
  border: 0 none;
  color: #FFFFFF;
  cursor: pointer;
  font-family: 'Altis_Book';
  font-size: 15px;
  padding: 3px 15px;
}
label.choose:before {
  content: 'Choose file';
  padding: 3px 6px;
  position: absolute;
}

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

Answer 3

您的答案可能是here、here 和here