我在asp.net中有一个文件上传控件,如下所示:
<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />
由于某种原因,“浏览...”按钮不适用于我已应用于任何输入[type =“button”]控件的标准CSS。
如何将相同的CSS应用于该控件的“浏览”按钮?
答案 0 :(得分:4)
试试这个
<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();
});
答案 1 :(得分:1)
由于OP是关于ASP.NET的,并且接受的答案是HTML / javascript,我以为我会用ASP.NET术语回答它:
ASP.NET部分:
<asp:FileUpload ID="fileUpload" runat="server" style="display:none" />
<input type="button" value="Select your file" id="browse"></input>
JQuery,jQuery UI for .button()部分:
$("input:button").button();
...
$("#browse").click(function () {
$("#<%= fileUpload.ClientID %>").click();
});
答案 2 :(得分:-1)
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);
}
});
和在CSS中:
/* 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;
}
/* --------------------------------------*/
确保使用最新版本的浏览器运行