Как применить CSS к ASP: FileUpload Control

Question

Как именно я настраиваю этот элемент управления?

Я пробовал это, но он не работает.

Также как можно нарисовать кнопку обзора, которая поставляется с этим элементом управления? Если это невозможно, есть ли другие альтернативы?

Edit:

Я проверил сгенерированный источник и asp.net дает контроль этот идентификатор ctl00_main_content_upload_tb

Я изменил CSS для

#ctl00_main_content_upload_tb 
{ 
    width: 500px; 
} 

но не растягивает контроль. Он добавляет отступ справа от элемента управления. Есть идеи?

Answer 1

Вы не можете официально стиль ввода типа файл (*) (который является тем, что делает управление FileUpload на странице), но есть способы, использующие немного Javascript &/или CSS - см http://www.quirksmode.org/dom/inputfile.html или http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html - но это не тривиально.

(*) Это мера безопасности

Answer 2

Это возможно, вы можете изменить управление FileUpload используя следующий код.

Шаг1: Изменить элемент управления FileUpload с помощью этого кода на странице aspx.

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

**