C# 设置asp:fileupload控件的样式

我在asp.net中有一个文件上载控件，如下所示：

<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />  

由于某种原因，浏览。。。按钮不应用我应用于任何输入[type=“button”]控件的标准CSS

如何将相同的CSS应用于该控件的浏览按钮？

试试这个

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>

JS

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

---

由于OP是关于ASP.NET的，而公认的答案是HTML/javascript，我想我应该用ASP.NET的术语来回答它：

ASP.NET部分：

JQuery，带有.button（）部分的JQuery UI：

$（“输入：按钮”）.button（）；
...
$（“#浏览”）。单击（函数（）{
$（“#”）点击（）；
});
：

<div class="fileupload-group">
    <button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
        Select File <i class="fa fa-folder-open"></i>
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
    </button>
    <input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>

请确保使用最新的浏览器版本运行
可能的副本这是一个副本如果不将样式应用于asp:fileupload，则将样式应用于生成的
input type=文件
，该文件具有其他答案中提到的限制如何显示带有文件名的关联文本框，使用asp.net控件文件上载时的方式？
<div class="fileupload-group">
    <button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
        Select File <i class="fa fa-folder-open"></i>
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
    </button>
    <input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>

$('input[id="<%= FileUpload1.ClientID %>"]').change(function () {
    var names = [];
    var length = $(this).get(0).files.length;
    for (var i = 0; i < $(this).get(0).files.length; ++i) {
        names.push($(this).get(0).files[i].name);
    }
    if (length > 2) {
        $("#<%=txtFileuploadName.ClientID%>").attr("value", length + " selected files");
    }
    else {
        $("#<%=txtFileuploadName.ClientID%>").attr("value", names);
    }
});

/* txtRight  ----------------------------*/
.txtRight {
    display: inline-block;
    margin-bottom: 3px;
    border: 1px solid #CCC;
    background-color: #FFF;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    position: relative;
    font-weight: normal;
    padding: 2px 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px #000000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px #000000;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -ms-box-shadow: inset 0 1px 1px #000000;
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px #000000;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    -ms-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
}
.txtRight:focus {
    border-color: #52a8ec;
    border-color: rgba(82,168,236,0.8);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
    -moz-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
    -ms-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);   
}
.txtRight {
    font-family: iransans !important;
    font-weight: normal !important;
    direction: rtl;
    text-align: right;
    margin-right: 0;
    top: 0;
    right: 0;
}
.txtRight:disabled {
    background-color: #f7f7f7 !important;
}
select.txtRight {
    padding: 1px 2px !important;
    font-size: 13px !important;
}
/* --------------------------------------*/
/* btnRed ------------------------------ */
.btnRed, a.btnRed {
    -ms-text-shadow: none;
    text-shadow: none;
    background: #ed1c24;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.btnRed:hover, .btnRed:focus, .btnRed, .btnRed:visited, .btnRed:disabled,
a.btnRed:hover, a.btnRed:focus, a.btnRed, a.btnRed:visited, a.btnRed:disabled, a.btnMoulinexRed:link {
    border: none;  
    color: white;
    text-decoration: none;
    padding: 5px;
    font-family: iransans;
    font-weight: normal;
    font-size: 12px;
    cursor: pointer;
}
.btnRed:hover, .btnRed:hover:enabled, .btnRed:focus, .btnRed:focus:enabled,
a.btnRed:hover, a.btnRed:hover:enabled, .btnRed:focus, a.btnRed:focus:enabled {
    background: #830022;
    background-color: #830022 !important;
    color: white !important;
}
.btnRed:visited, .btnRed:link,  /*a.btnRed, */
a.btnRed:visited, a.btnRed:link {
    background: #ed1c24;
    background-color: #ed1c24;
    color: white;
}
.btnRed:active, .btnRed:active:enabled,
a.btnRed:active, a.btnRed:active:enabled 
{
    background: #e6e6e6 !important;
    background-color: #e6e6e6 !important;
    color: #333 !important;
}
.btnRed:disabled,
a.btnRed:disabled, a.aspNetDisabled {
    color: #333 !important;
    background-color: #D6D1D1 !important;
}
/* --------------------------------------*/
/* FileUpload ---------------------------*/
.fileupload-group {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    margin-top: 3px;
    margin-bottom: 8px;
}
.fileupload-group .fileupload-name {
    display: inline-block;
    position: relative;
    width: 67%;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.btnFileupload {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    width: 17%;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -ms-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.fileupload-group .btnUpload {
    width: 15%;
    vertical-align: middle;
}
.fileupload-name {
    padding: 0;
    width: 100%;
    white-space: nowrap;
    height: 29px;
    padding: 4px 12px;
    font-size: 14px;
}
.fileupload-name.txtRight {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-border-top-right-radius: 0 ;
    border-top-right-radius: 0;
    -ms-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    display: inline-block;
    margin-right: -6px;

}
.fileupload-name.txtRight {
    background-color:#FFF;
    -ms-opacity: 1;
    opacity: 1;
    border: 1px solid #ffaaaa;
}
.fileupload-name.txtRight:disabled {
    background-color:#FFF;
    -ms-opacity: 1;
    opacity: 1;
    border: 1px solid #ccc;
}
.fileupload-group input[type=file] {
    display:inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -ms-opacity: 0;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* --------------------------------------*/