Stosując css na przycisk Przeglądaj ASP.NET FileUpload Control tylko

Question

Mam kontroli FileUpload jak ten

<asp:FileUpload ID="fileuploader" runat="server" /> 

Teraz chcę zastosować css tylko na przycisk Przeglądaj strony

Jak mogę to zrobić?

Answer 1

Styling się input tag type="file" wymaga trochę pracy przeglądarki nie zachowują się podobnie, gdy próbujesz je niestety poprawić.

Istnieje kilka sposobów na wykonanie tak jakby:

• http://www.quirksmode.org/dom/inputfile.html
• http://www.appelsiini.net/projects/filestyle

Answer 2

najwyraźniej nie można projektować je bezpośrednio z CSS, ale można „włamać się” nowy styl do nich - przeczytaj poniższy artykuł szczegóły

http://www.quirksmode.org/dom/inputfile.html

Answer 3

Jest to możliwe, można zmienić kontrolę FileUpload stosując poniższy kod.

Krok 1: Control Change FileUpload z tym kodem na aspx strony

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

Step 2: teraz dodać poniżej kodu CSS do głównego pliku CSS

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

to zrobić.

Answer 4

Obejrzyj ten film, należy dodać dodatkowy przycisk, ale działa https://youtu.be/_O9YVO-Z-Xo