नींव

Question

के साथ स्टाइलिंग फ़ाइल इनपुट मैं नींव का उपयोग कर रहा हूं और मैंने फ़ाइल इनपुट, केवल सामान्य इनपुट तत्वों के संबंध में दस्तावेज़ में कुछ भी नहीं देखा है। लेकिन फ़ाइल इनपुट स्टाइल करना इतना आसान नहीं है। और अधिक यदि आप सभी ब्राउज़रों में पूरे फॉर्म के डिज़ाइन के साथ सुसंगत रखना चाहते हैं।

मैं Styling an input type="file" button या https://github.com/filamentgroup/jQuery-Custom-File-Input जैसे कुछ समाधान देखा है, लेकिन मैं वहाँ कुछ नींव में विशिष्ट है, हमेशा की तरह रैपिंग div शैलियों के रूप में सब पर काम नहीं करते है, तो जानना चाहता था (div.large-3.columns आदि) ।

आप यह कैसे करते हैं?

Answer 1

क्या आपको केवल बटन चाहिए? या फ़ाइल के पते के साथ क्षेत्र भी? अगर केवल बटन simpliest समाधान demo

<a class="wrapper"> 
    button name 
    <input type="file"/> 
</a> 

.wrapper { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
} 
input { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    font-size: 50px; /* some huge for cursor pointer hack */ 
} 

है भी आप कुछ ब्राउज़रों see article

Answer 2

के लिए छद्म वर्गों का उपयोग कर सकते मैं सिर्फ इनपुट टैग के लिए .button वर्ग लागू होता है। यह मेरे लिए काफी अच्छा लग रहा है।