कस्टम फ़ाइल इनपुट स्टाइलिंग - सीएसएस-ट्रिक्स

यदि आप वेबकिट / ब्लिंक / क्रोम विशिष्ट स्टाइल में रुचि रखते हैं, तो छिपाने के लिए एक मालिकाना छद्म तत्व है, और फिर एक गैर-मानक psudeo-on-a-input का उपयोग करें:

.custom-file-input::-webkit-file-upload-button ( visibility: hidden; ) .custom-file-input::before ( content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-weight: 700; font-size: 10pt; ) .custom-file-input:hover::before ( border-color: black; ) .custom-file-input:active::before ( background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); )

डेमो

WebPit में पेन कस्टम फाइल इनपुट देखें / CodePen पर क्रिस Coyier (@chriscoyier) द्वारा पलक

उचित चेतावनी: यह आपको चयनित फ़ाइल नाम नहीं दिखाता है, लेकिन आप ऐसा करने के लिए इसे ट्विक करने में सक्षम हो सकते हैं। मुझे लगता है कि आम तौर पर इन दिनों आप फ़ाइल चयन के बाद एक घटना शुरू कर रहे हैं और वैसे भी डेटा को स्नैग कर रहे हैं।