बटन ब्राउज़ करने के लिए सीएसएस कैसे लागू करें

Question

मैं अपने वेबपृष्ठ में <input type="file" /> का उपयोग कर रहा हूं। मेरे पास बटन और अन्य नियंत्रणों के लिए अलग-अलग सीएसएस वर्ग हैं। लेकिन मैं उपरोक्त टैग के कारण दिखाई देने वाले बटन ब्राउज़ करने के लिए कोई कक्षा, शैली जोड़ने में सक्षम नहीं हूं।

क्या इसकी डिफ़ॉल्ट उपस्थिति बदलने का कोई तरीका है?

धन्यवाद अग्रिम है।

Answer 1

आप ऐसा नहीं कर सकते हैं। आप केवल पूरे <input /> पर शैली लागू कर सकते हैं।

आप opacity: 0 सीएसएस हैक्स का उपयोग अपनी पसंदीदा छवि और छवि के साथ बदलने के लिए कर सकते हैं: होवर।

ध्यान रखें कि height: संपत्ति फ़ायरफ़ॉक्स 3.6 पर काम नहीं करेगी; इसके बजाय ऊंचाई बढ़ाने के लिए आप font-size: का उपयोग कर सकते हैं।

मेरे पास एक उदाहरण है: http://timc.idv.tw/html5-file-upload/; दूसरे डेमो के सीएसएस का निरीक्षण करें।

Answer 2

आप सीधे फ़ाइल इनपुट शैली नहीं बना सकते हैं, लेकिन आप वास्तव में इसे कुछ गलत स्टाइल दे सकते हैं और/या इसे अदृश्य बना सकते हैं लेकिन फिर भी क्लिक करने योग्य बना सकते हैं। Quirksmode पर ऐसा करने के तरीके पर एक लेख है।

Answer 3

<input type="file" /> नियंत्रण शैली के लिए कुख्यात रूप से मुश्किल है।

Heresomearticles हैं जो मदद कर सकते हैं।

Answer 4

हार्ड-टू-त्वचा फॉर्म तत्वों को स्टाइल करने के लिए some nice libraries भी हैं। चयन और अपलोड फ़ील्ड के लिए वर्दी अच्छा है।

Answer 5

आप सीएसएस के साथ एक फ़ाइल इनपुट बटन शैली नहीं बना सकते हैं। यह एकमात्र तत्व नहीं है जिसे आप शैली नहीं बना सकते। कुछ अन्य इनपुट शैलियों को स्वीकार नहीं कर रहे हैं। कई प्रकार के इनपुट देखने के लिए इस fiddle पर देखें। आपके ब्राउज़र के आधार पर कुछ इनपुट अलग-अलग होते हैं। रेंज इनपुट या डेट इनपुट जैसे इनपुट ओएस लेवल यूआई का उपयोग कर रहे हैं जो सीएसएस द्वारा संपादन योग्य नहीं है।

आप क्या कर सकते हैं फ़ाइल इनपुट को छिपा रहा है और एक अन्य तत्व दिखा रहा है जैसे एक div या अन्य इनपुट जो आपके फ़ाइल इनपुट के रूप में बटन प्रकार इनपुट जैसे स्टाइल को स्वीकार कर रहा है और ट्रिगर ट्रिगर क्लिक करें और सबमिट करें (एंटर दबाएं) अपने छुपे हुए वास्तविक पर ईवेंट फ़ाइल इनपुट

कोड उदाहरण:

एचटीएमएल

<input type="file" /> 
<label>Select file to upload: <input type="button" /></label> 

सीएसएस

input[type="file"]{visibility:hidden; width:0;} 

जावास्क्रिप्ट:

var fileInput = document.querySelectorAll('input[type="file"]')[0], 
    fakeFileInput = document.querySelectorAll('label')[0], 
    clickEvent = document.createEvent('MouseEvent'); 
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null); 

fakeFileInput.addEventListener('click', function(event){ 
    fileInput.dispatchEvent(clickEvent); 
}, false); 

fiddle in action

पर देखो

तो आपके प्रश्न का उत्तर यह है: नहीं, अफसोस की बात है कि आप फ़ाइल इनपुट इनपुट शैली नहीं कर सकते हैं!