इनपुट फ़ाइल बटन आकार कैसे बदलें?

Question

मैं अस्पष्टता विधि के साथ स्टाइल इनपुट फ़ाइल के साथ काम कर रहा हूं - असली इनपुट फ़ाइल बटन में अस्पष्टता 0 है और इसके सामने, जेड-इंडेक्स का उपयोग करके एक और इनपुट (अस्पष्टता के साथ) 1 है। दुर्भाग्य से मैं चाहता हूं कि मेरा दृश्य बटन स्क्वायर चित्र (चौड़ाई: ऊंचाई: 1: 1) - और अदृश्य इनपुट फ़ाइल हमेशा आयताकार (इनपुट बॉक्स और पहलू अनुपात के साथ चयन बॉक्स के बारे में 1:10) है। प्रश्न यह है कि - पूरे दृश्यमान बटन क्षेत्र को क्लिक करने योग्य बनाने के लिए इनपुट फ़ाइल बटन को स्क्वायर (या किसी भी आकार) के आकार का आकार कैसे बदलें (क्योंकि अदृश्य बटन पर क्लिक करने से ब्राउज़र विंडो खोलने का कारण बनता है)। अब दृश्यमान बटन का केवल एक हिस्सा "क्लिक करने योग्य" है।

सीएसएस:

<style type="text/css"> 
    .upload { 
     position:relative; 
    width:100px; 
    } 

    .realupload { 
    position:absolute; 
    top:0; 
    right:0; 
    opacity:0.5; 
    -moz-opacity:0.5; 
    filter:alpha(opacity:0.5); 
    z-index:2; 
    width:100px; 
    } 

    form .fakeupload { 
    background: url(images/bglines.png); 
    } 

    form .fakeupload input { 
    width:0px; 
    } 

    </style> 

और एचटीएमएल:

<form> 
    <li class="upload"> 
    <div class="fakeupload"> 
     <input type="text" name="fakeupload" style="opacity: 0;"/> 
    </div> 
    <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" /> 
    </li> 
    </form> 

Answer 1

"छवि" इनपुट प्रकार का उपयोग कर की कोशिश?

अन्यथा आपको डिस्प्ले सेट करना सुनिश्चित करना होगा: इनपुट बटन पर ब्लॉक पैरामीटर।

Answer 2

यह संभव है कि विकृत HTML समस्या है। - आपके पास ली टैग के बाहर फॉर्म टैग नहीं हो सकते हैं।

यह मेरे लिए ठीक काम करने के लिए ..... Demo here

Answer 3

हम एक ऐसी ही मामला था लगता है।

यह सुपर सुरुचिपूर्ण लेकिन इसके बजाय एकाधिक फ़ाइल इनपुट डालने की नहीं आप निम्नलिखित के रूप में की कोशिश कर सकते है:

• इनपुट की font-size वृद्धि हुई मूल सेट बटन
• की चौड़ाई बढ़ाने के लिए रिश्तेदार तत्व अतिप्रवाह: छिपा
• (वैकल्पिक) सेट ऊंचाई 100%

में

के रूप में (स्कॉट डेमो के आधार पर)

केवल फ़ायरफ़ॉक्स

पर काम करता है

Answer 4

इनपुट प्रकार फ़ाइल बटन क्लिक करने योग्य क्षेत्र छोटा करने के लिए आप इस का उपयोग करने की कोशिश कर सकते हैं:

form .fakeupload input { 
    width:20px; 
    transform: scale(0.23,1); 
} 

यह इनपुट प्रकार फ़ाइल के क्लिक करने योग्य क्षेत्र को संकीर्ण कर देगा। (आप ट्रांसफॉर्म: स्केल (एक्स, वाई) का उपयोग कर सकते हैं - x और y संख्या के साथ आपकी आवश्यकता फिट बैठ जाएगी। मोबाइल डिवाइस या विभिन्न ब्राउज़रों के लिए उचित स्टाइल जोड़ने के लिए याद रखें।