如何將CSS應用於ASP：FileUpload控件

我試過這個，但它不起作用。

<asp:FileUpload id="upload_tb" runat="server" /> 

#upload_tb 
{ 
    width: 500px; 
}

另外我該如何設計這個控件附帶的瀏覽按鈕？如果不可能，還有其他的選擇嗎？

編輯：

我檢查生成的源和asp.net給這個ID ctl00_main_content_upload_tb

我改變了CSS來

#ctl00_main_content_upload_tb 
{ 
    width: 500px; 
}

的控制，但它並沒有畫出控制。它在控件的右側添加填充。有任何想法嗎？

來源

2010-08-11 Arizona1911

不能正式樣式類型的文件（*）（這是FileUpload控件呈現網頁上的內容），但也有使用JavaScript代碼& /或CSS方式的輸入 - 見http://www.quirksmode.org/dom/inputfile.html或http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html - 但它不是微不足道的。

（*）這是一個安全措施

來源

2010-08-11 19:01:11 stuartd

這是可能的，你可以使用下面的代碼更改FileUpload控件。

第1步：在aspx頁面上使用此代碼更改FileUpload控件。

<label class="file-upload"> <span><strong>Upload Image</strong></span> <asp:FileUpload ID="FileUpload1" runat="server" > </asp:FileUpload> </label>

.file-upload { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    ; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-family: Arial; 
 
    border: 1px solid #124d77; 
 
    background: #007dc1; 
 
    color: #fff; 
 
    border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    cursor: pointer; 
 
    text-shadow: #000 1px 1px 2px; 
 
    -webkit-border-radius: 6px; 
 
} 
 

 
    .file-upload:hover { 
 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1)); 
 
     background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%); 
 
     background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%); 
 
     background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%); 
 
     background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%); 
 
     background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); 
 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0); 
 
     background-color: #0061a7; 
 
    } 
 

 
/* The button size */ 
 
.file-upload { 
 
    height: 30px; 
 
} 
 

 
    .file-upload, .file-upload span { 
 
     width: 90px; 
 
    } 
 

 
     .file-upload input { 
 
      ; 
 
      top: 0; 
 
      left: 0; 
 
      margin: 0; 
 
      font-size: 11px; 
 
      font-weight: bold; 
 
      /* Loses tab index in webkit if width is set to 0 */ 
 
      opacity: 0; 
 
      filter: alpha(opacity=0); 
 
     } 
 

 
     .file-upload strong { 
 
      font: normal 12px Tahoma,sans-serif; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
     } 
 

 
     .file-upload span { 
 
      ; 
 
      top: 0; 
 
      left: 0; 
 
      display: inline-block; 
 
      /* Adjust button text vertical alignment */ 
 
      padding-top: 5px; 
 
     }

來源

2015-06-25 10:13:02

如何將CSS應用於ASP：FileUpload控件

回答

相關問題