फ़ायरफ़ॉक्स में इनपुट प्रकार = "फ़ाइल" ब्राउज़ बटन का आकार बदलें?

Question

क्या सीएसएस या जेएस का उपयोग कर वैसे भी है कि आप फ़ायरफ़ॉक्स में इनपुट प्रकार = "फ़ाइल" ब्राउज़ बटन का आकार बदल सकते हैं?

मुझे पता है कि आप बटन के पाठ को नहीं बदल सकते हैं, लेकिन मुझे बस इतना करना है कि यह बटन फ़ायरफ़ॉक्स के लिए व्यापक हो। तो एक -moz सीएसएस नियम का उपयोग सही होगा।

Answer 1

स्टाइलिंग फ़ाइल इनपुट बटन सुरक्षा कारणों से बहुत सीमित हैं। कुछ कामकाज हैं, लेकिन कोई भी सही नहीं है। Quirksmode पर इस पोस्ट की जाँच करें:

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

Answer 2

संपादित करें: के रूप में दूसरों का उल्लेख किया है फ़ायरफ़ॉक्स विधि suuport नहीं है नीचे मैं नीचे दिए गए लिंक को उल्लेख करता है http://www.quirksmode.org/dom/inputfile.html

निम्नलिखित एक बहुत सरल उपाय है । हालांकि मैं लेबल को कक्षा में जोड़ने की सलाह दूंगा। मूल रूप से आप लेबल शैली इनपुट के बजाय क्रॉस ब्राउज़र मुद्दों और चौड़ाई और ऊंचाई कीड़े से परहेज:

<label> 
    <input type=file> 
</label> 

सीएसएस

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

क्या वेबसाइटों अक्सर करते हैं जब वे जरूरत है एक "अनुकूलित" फ़ाइल अपलोड विजेट: "वास्तविक" फ़ाइल अपलोड क्षेत्र छुपा है। एक टेक्स्ट फ़ील्ड जोड़ें जो फ़ाइल अपलोड फ़ील्ड का वर्तमान मान दिखाएगा और एक बटन जो फ़ाइल अपलोड फ़ील्ड में फ़ाइल चयन को ट्रिगर करेगा। यहाँ एक उदाहरण:

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

यहाँ मुख्य विचार है: http://www.quirksmode.org/dom/inputfile.html

और यह मेरे लिए इनपुट क्षेत्र का आकार बदलने

input{font-size: 100px;} 

वर्क्स ठीक के लिए मददगार हो सकता है।

Answer 5

मेरे लिए, जेन्या शेवचेन्को ने सबसे अच्छे कामकाजी समाधानों में से एक दिया। अपनी विधि का उपयोग करना, हम क्रॉस-ब्राउज़र फ़ाइल इनपुट बटन बना सकते हैं: फ़ायरफ़ॉक्स में http://jsfiddle.net/CnHj5/ काम करता है और एक अच्छा सूचक कर्सर उपलब्ध है: http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

इस एक कोशिश करें।

HTML:

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

सीएसएस:

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}