样式化asp:fileupload控件

本文关键字：fileupload 控件 asp 样式 | 更新日期: 2023-09-27 17:49:01

我在asp.net中有一个文件上传控件，像这样:

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

由于某些原因浏览…button没有应用我应用于任何input[type="button"]控件的标准CSS。

如何将相同的CSS应用于该控件的Browse按钮?

样式化asp:fileupload控件

try this

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

.hidden {
    display:none;
}
.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

JS 

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

由于OP是关于ASP的。. NET和公认的答案是HTML/javascript，我想我会回答它在ASP。网络术语:

ASP。网络部分:

<asp:FileUpload ID="fileUpload" runat="server" style="display:none" /> <input type="button" value="Select your file" id="browse"></input>

JQuery，使用JQuery UI为。button()部分:

$("input:button").button(); ... $("#browse").click(function () { $("#<%= fileUpload.ClientID %>").click(); });

在aspx格式下:

<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>

和javascript中的

$('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;
}
/* --------------------------------------*/

确保使用最新的浏览器版本来运行

相关文章：