html - Cross-browser custom styling for file upload button -


इस सवाल का पहले से ही एक उत्तर है: < / P>

  • 14 जवाब

मैं शैली की कोशिश कर रहा हूँ मेरी व्यक्तिगत प्राथमिकताओं के लिए एक फ़ाइल अपलोड बटन, लेकिन मुझे JS के बिना ऐसा करने के लिए कोई भी ठोस तरीके नहीं मिल सका। मुझे इस विषय के बारे में प्रश्न मिल गए, लेकिन जवाब वहां या तो जावास्क्रिप्ट शामिल थे, या सुझाव दिया।

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

HTML:

<पूर्व> & lt; div class = "myLabel" & gt; & Lt; इनपुट प्रकार = "फ़ाइल" / & gt; & Lt; span & gt; मेरा लेबल & lt; / span & gt; & Lt; / div & gt;

सीएसएस: 

 । MyLabel {स्थिति: रिश्तेदार; }। MyLabel इनपुट {स्थिति: निरपेक्ष; Z- सूचकांक: 2; अस्पष्टता: 0; चौड़ाई: 100%; ऊंचाई: 100%; }

दर्शाता है कि यह दृष्टिकोण कितना दोषपूर्ण है। क्रोम में, दूसरा डेमो बटन के नीचे !! पर क्लिक करने से फाइल संवाद खुल जाएगा, लेकिन अन्य सभी ब्राउज़रों में, फ़ाइल बटन बटन के सही क्षेत्रों को नहीं लेते हैं।

क्या फ़ाइल अपलोड बटन को स्टाइल करने का कोई ठोस तरीका है, बिना किसी जावास्क्रिप्ट के, और संभवतया छोटे 'हैमी' कोडिंग के रूप में उपयोग करना संभव है (चूंकि हैकिंग आमतौर पर इसके साथ अन्य समस्याएं लाती है, जैसे कि बेला)?

मैं इसे पोस्ट कर रहा हूँ क्योंकि (मेरे आश्चर्य करने के लिए) कोई अन्य नहीं था जगह मुझे यह अनुशंसा मिल सकती है।

ऐसा करने का एक आसान तरीका है, बिना ब्राउज़र-निर्धारित इनपुट आयामों को प्रतिबंधित किए बिना। बस एक छिपे हुए फ़ाइल अपलोड बटन के आसपास & lt; लेबल & gt; टैग का उपयोग करें यह [1] के माध्यम से स्टाइलिंग की तुलना में स्टाइलिंग में और अधिक आजादी की अनुमति देता है।

लेबल टैग को बच्चे पर किसी भी क्लिक ईवेंट को निर्देशित करने के सटीक उद्देश्य के लिए बनाया गया था इनपुट [2] , इसलिए इसका उपयोग करते हुए, आपको किसी भी जावास्क्रिप्ट की ज़रूरत नहीं होगी ताकि आपके लिए इवेंट बटन पर क्लिक ईवेंट को निर्देशित किया जा सके। आप निम्न की तरह कुछ का उपयोग करना चाहते हैं:

< प्री क्लास = "स्निपेट-कोड-सीएसएस लैंग-सीएसएस टोपेप्रिंट-ओवरराइड"> label.myLabel इनपुट [प्रकार = "फ़ाइल"] {स्थिति: तय; शीर्ष: -1000px; } / ***** कस्टम स्टाइल उदाहरण ***** / .myLabel {सीमा: 2px ठोस # एएए; सीमा-त्रिज्या: 4px; पैडिंग: 2px 5px; मार्जिन: 2px; पृष्ठभूमि: # डीडीडी; प्रदर्शन: इनलाइन-ब्लॉक; }। MyLabel: होवर {पृष्ठभूमि: # सीसीसी; }। MyLabel: सक्रिय {पृष्ठभूमि: # सीसीएफ; }। Mylabel: invalid + span {color: # A44; }। MyLabel: वैध + अवधि {रंग: # 4 ए 4; } 
  & lt; label class = "myLabel" & gt; & Lt; इनपुट प्रकार = "फ़ाइल" की आवश्यकता / & gt; & Lt; span & gt; मेरा लेबल & lt; / span & gt; & Lt; / लेबल & gt;

मैंने इनपुट को छुपाने के लिए एक निश्चित स्थिति का उपयोग किया है, ताकि यह इंटरनेट के प्राचीन संस्करणों में भी काम कर सके एक्सप्लोरर (एम्यूलेटेड आईई 8- ने एक दृश्यता: छिपी या डिस्प्ले: कोई भी फ़ाइल इनपुट पर काम करने से इनकार कर दिया)। मैंने एम्यूलेटेड आईई 7 और अप में परीक्षण किया है, और यह पूरी तरह से काम करता है।

  1. आप & lt; बटन & gt; s अंदर और < ; लेबल & gt; टैग दुर्भाग्य से, इसलिए आपको बटन के लिए शैलियों को परिभाषित करना होगा
  2. यदि एट्रिब्यूट के लिए परिभाषित किया गया है, तो इसका मान इनपुट को ट्रिगर करने के लिए प्रयोग किया जाता है, जैसा कि id & lt; label & gt;
पर विशेषता के लिए कोड> के रूप में <

Comments

Post a Comment

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

I am using Objective-class in my Swift Project through a bridging header. The method signature looks like this: - Some cement (some type) some parameters; I started by getting an example of class, calling method, and storing the value: var myInstance = MyClassWithThatMethod (); Var cfArr = myInstance.someMethod (some value); Then try to get the value in the array: var valueInArrayThatIWant = CFArrayGetValueAtIndex (cfArr, 0); However, I get the error unmanaged & lt; Cfarray & gt; Not like 'CFArray' . Unmanaged & lt; Cfarray & gt; also means? I looked, but I do not need to change the array in a fast array (though it would be good). I need to be able to get value from the array. I also tried CFArray method to pass in a function: func doSomeStuffOnArray (myArray: NSArray) {} Although I get the same error when using: doSomeStuffOnArray (cfArr); // unmanaged & lt; CFArray & gt; I am using CFArray because I want to sto...
Read more

eclipse plugin - Run java code error: Workspace is closed -

To create an automated project, I created a plug-in project with the following dependencies: Org.eclipse.core.resources org.eclipse.equinox.registry org.eclipse.core.runtime and the following The Java class is located in the src folder: Package Examiner; Import org.eclipse.core.resources.IProject; Import org.eclipse.core.resources.IWorkspaceRoot; Import org.eclipse.core.resources.ResourcesPlugin; Import org.eclipse.core.runtime.CoreException; Import org.eclipse.core.runtime.IProgressMonitor; Import org.eclipse.core.runtime.NullProgressMonitor; Public class tes {public static zero main (string [] args) {// TODO auto generated method stub IProgressMonitor progress monitor = new NullProgressMonitor (); IWorkspaceRoot root = ResourcesPlugin.getWorkspace (). GetRoot (); Ipoject project = root.jetproject ("desired projectname"); Try {Project.create (progress monitor); Project.open (progressMonitor); } Grip (CoreException E) {// TODO Auto generated blocking block e....
Read more

c - Error on building source code in VC 6 -

When I create my project in VC6, the BScMKE reports the following error Linking .. Creating Library ... .. / ... / PB / Bean / Debub / ICEERP.Lib and Object ........ P.B. / Bean / DBube / ICREPlay.APP Browse information file ... BSMMK: ​​error can not be read from BK 1505: file '../../PB/bin/TmpOut/ICReplay/Debug/ICReplay_PB.bsc' Error executing bscmake.exe Can someone help me? 2 Reason for reference from: "ICReplay_PB .bsc "file will be corrupted The trunk of the file will be happening with the compiler running out of disk space or is being interrupted when creating .sbr file I think this answer will help you!
Read more