स्टाइल फ़ाइल इनपुट बटन के पीछे मूल आधार फ़ाइल पर पूरी तरह से तैनात नियंत्रण ओवरले करने के लिए है अपलोड करें। फ़ाइल अपलोड अस्पष्टता 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/
स्रोत
2013-03-20 09:19:42
संभावित डुप्लिकेट [HTML में फ़ाइल ब्राउज़ बटन को प्रतिस्थापित करने का सबसे अच्छा तरीका क्या है?] (Http://stackoverflow.com/questions/108149/what-is-the-best-way- प्रतिस्थापित करने के लिए-फ़ाइल-ब्राउज़-बटन-इन-एचटीएमएल) –
@ मंजीत सिंह यदि आप उत्तर चुन सकते हैं तो यह सहायक होगा - यह अब दो साल हो गया है। – Cody
oops @DoctorOreo .. मैं जवाब का चयन करना भूल गया था। याद दिलाने के लिए धन्यवाद। –