लागू करने सीएसएस केवल

Question

मैं इस

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

की तरह एक FileUpload नियंत्रण है अब मैं केवल ब्राउज़ बटन ओर से सीएसएस लागू करना चाहते हैं

कैसे क्या मैं यह कर सकता हूं?

Answer 1

type="file" के साथ एक input टैग स्टाइलिंग के लिए निम्न आलेख पढ़ने के काम का एक सा की आवश्यकता है , दुर्भाग्यवश उन्हें स्टाइल करने का प्रयास करते समय ब्राउज़र समान व्यवहार नहीं करते हैं।

इसलिए हालांकि करने का एक कुछ तरीके हैं:

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

Answer 2

जाहिरा तौर पर आप सीएसएस के साथ सीधे उन्हें शैली नहीं दे सकते, लेकिन आप उन्हें में एक नई शैली "हैक" कर सकते हैं - विवरण

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

Answer 3

यह संभव है आप निम्नलिखित कोड का उपयोग कर FileUpload नियंत्रण बदल सकते हैं।

चरण 1: aspx पेज

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

चरण 2 पर इस कोड के साथ FileUpload बदलें नियंत्रण: अब आपका मुख्य सीएसएस फ़ाइल

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

यह किया है में सीएसएस कोड के नीचे जोड़ें। इस वीडियो को बाहर

Answer 4

जांच, आप एक अतिरिक्त बटन जोड़ना होगा, लेकिन यह काम करता है https://youtu.be/_O9YVO-Z-Xo