Applicando css su Browse Button asp.net FileUpload controllo solo

Question

Ho un controllo FileUpload come questo

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

Ora voglio applicare CSS solo sulla parte pulsante Sfoglia

Come posso farlo?

Answer 1

Styling un tag input con type="file" richiede un po 'di lavoro , i browser non si comportano in modo simile quando si tenta di modificarli sfortunatamente.

Ci sono alcuni metodi per farlo però:

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

Answer 2

a quanto pare non è possibile lo stile direttamente con i CSS, ma si può "hackerare" un nuovo stile in loro - leggere il seguente articolo per i dettagli

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

Answer 3

Questo è possibile è possibile modificare il controllo FileUpload utilizzando codice seguente.

Fase 1: Control Change FileUpload con questo codice su aspx pagina

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

Fase 2: ora aggiungere sotto il codice CSS nel file CSS principale

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

E 'fatta.

Answer 4

Guarda questo video, è necessario aggiungere un ulteriore pulsante ma funziona https://youtu.be/_O9YVO-Z-Xo