样式化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应用于“上传”按钮中的“浏览”按钮。有什么建议吗？

EDIT1 这样做的任何纯CSS方式？

Answer 1

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

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

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

<强> 自定义的扩展 ：

具体来说，对于input[type=file]至少Trident（对于IE-10及以上版本）和Webkit（对于Chrome，Safari），允许在某种程度上对这个元素进行样式设置，而不会使用像隐藏元素这样的黑客，或者绝对定位伪-elements。对于这种情况，我们感兴趣的特定于供应商的扩展是：

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来控制它？

<强> 演示 ：

示例小提琴：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>

Answer 2

您可以设置label样式并将其置于选择文件按钮

之上

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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