2013-03-20 21 views
6

मैं अपलोड फ़ाइल फ़ील्ड में ब्राउज बटन को कस्टमाइज़ करना चाहता हूं (पृष्ठभूमि और रंग इत्यादि बदलना चाहता हूं)।मैं ब्राउज़ बटन को कैसे अनुकूलित कर सकता हूं?

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13"> 

See attachment

+0

संभावित डुप्लिकेट [HTML में फ़ाइल ब्राउज़ बटन को प्रतिस्थापित करने का सबसे अच्छा तरीका क्या है?] (Http://stackoverflow.com/questions/108149/what-is-the-best-way- प्रतिस्थापित करने के लिए-फ़ाइल-ब्राउज़-बटन-इन-एचटीएमएल) –

+0

@ मंजीत सिंह यदि आप उत्तर चुन सकते हैं तो यह सहायक होगा - यह अब दो साल हो गया है। – Cody

+0

oops @DoctorOreo .. मैं जवाब का चयन करना भूल गया था। याद दिलाने के लिए धन्यवाद। –

उत्तर

10

आप नहीं कर सकते। आपको अपना खुद का बटन बनाना होगा और वास्तविक इनपुट ट्रिगर करना होगा।

यहां आप jQuery का उपयोग कर ऐसा कर सकते हैं। देखें working example.

HTML:

<input type="file" class="hidden" id="uploadFile"/> 
<div class="button" id="uploadTrigger">Upload File</div> 

jQuery:

$("#uploadTrigger").click(function(){ 
    $("#uploadFile").click(); 
}); 

सीएसएस:

.hidden { 
    display:none; 
} 
.button { 
    border: 1px solid #333; 
    padding: 10px; 
    margin: 5px; 
    background: #777; 
    color: #fff; 
    width:75px; 
} 

.button:hover { 
    background: #333; 
    cursor: pointer; 
} 
+0

धन्यवाद डॉक्टर ', यह असली मुझे लगाया :) –

+0

और "tabindex =" 6 "" के साथ क्या है? –

+0

@ user3016686 आपका क्या मतलब है? – Cody

0

आप सीधे ब्राउज़ बटन को अनुकूलित नहीं कर सकते। आपका सीएसएस इस पर काम नहीं करेगा।

आप क्या कर सकते हैं, आप इसके बाईं ओर एक टेक्स्टबॉक्स के साथ अपना बटन बना सकते हैं। इसे कस्टमाइज़ करें, और क्लिक पर, मूल फ़ाइल अपलोड को ट्रिगर करें।

देखते हैं कि यह link और this

0

ब्राउज़ बटन में परिवर्तन के लिए निम्नलिखित की जाँच करें:

  1. Browse button css
  2. Browse button design

आशा है कि इन कड़ियों आप में मदद मिलेगी।

1

स्टाइल फ़ाइल इनपुट बटन के पीछे मूल आधार फ़ाइल पर पूरी तरह से तैनात नियंत्रण ओवरले करने के लिए है अपलोड करें। फ़ाइल अपलोड अस्पष्टता 0 पर सेट है, जिससे यह दिखाना नहीं है। इसका जेड-इंडेक्स ओवरलैड नियंत्रण से ऊपर सेट है, जबकि नियंत्रण के जेड-इंडेक्स को फ़ाइल अपलोड से कम सेट किया गया है। तो जब उपयोगकर्ता सोचता है कि वे अस्पष्टता 0.

यहाँ एक वास्तव में किसी न किसी तरह उदाहरण है करने के लिए सेट के साथ अपलोड आच्छादित नियंत्रण वे वास्तव में फ़ाइल क्लिक कर रहे हैं क्लिक कर रहे हैं:

एचटीएमएल

<div id="file-upload-cont"> 
    <input id="original" type="file"/> 
    <div id="my-button">Find</div> 
    <input id="overlay"/> 
</div> 

सीएसएस

#my-button{ 
    position: absolute; 
    border: 1px solid black; 
    background: green; 
    padding 3px; 
    width: 50px; 
    height: 25px; 
    text-align: center; 
    left: 148px; /* Positioning over file-upload */ 
    top: 0px; 
    z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
} 

#overlay{ 
position: absolute; 
z-index: 1; /* Lower z-index causes controls to sit under file upload */ 
left: 0; /* Positioning over file-upload */ 
} 

#original{ 
    opacity: 0; /* Opacity makes it invisible*/ 
    position: relative; 
    z-index: 100; /* z-index causes original file upload to sit above other controls*/ 
} 

#file-upload-cont{ 
    position: relative; 
} 

कार्य उदाहरणhttp://jsfiddle.net/tP8KY/1/

+0

मैंने कोड केविन बोवर्सॉक्स को कोड करने की कोशिश की, लेकिन मैं उस इनपुट ओवरले में चुनी गई फ़ाइल नहीं देख सकता ... यह वह त्रुटि है जो हर कोई बात करती है? – brainless

संबंधित मुद्दे