हम CSS प्सूडो एलिमेंट ::file-selector-button का उपयोग करके फाइल अपलोड बटन को स्टाइल कर सकते हैं। हालांकि, इस प्सूडो एलिमेंट का पूर्ण समर्थन केवल Firefox और Firefox Android तक सीमित है।
::-webkit-file-upload-button का उपयोग Safari, Chrome और Opera को सपोर्ट करने के लिए किया जाता है।
सिंटैक्स
CSS file-selector प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector::file-selector-button { attribute: /*value*/ } Selector::-webkit-file-upload-button { attribute: /*value*/ }
उदाहरण 1 (Firefox के लिए)
<!DOCTYPE html> <html> <head> <style> input[type=file]::file-selector-button:hover { cursor: grab; background-color: blueviolet; color: white; font-size: 1.2em; box-shadow: inset 5px 10px 10px cornflowerblue; } </style> </head> <body> <form> <label for="fup">Click to</label> <input type="file" id="fup" /> <input type="text" placeholder="Random Text here" /> <button type="submit">Done</button> </form> </body> </html>
यह Firefox वेब ब्राउज़र में निम्न आउटपुट देता है।
उदाहरण 2 (Chrome/Safari के लिए webkit प्रीफिक्स के साथ)
<!DOCTYPE html> <html> <head> <style> input[type=file]::file-selector-button:hover { cursor: pointer; background-color: crimson; font-size: 1.2em; border-radius: 25%; box-shadow: inset 5px 10px 10px cornsilk; } input[type=file]::-webkit-file-upload-button:hover { cursor: pointer; background-color: crimson; font-size: 1.2em; border-radius: 25%; box-shadow: inset 5px 10px 10px cornsilk; } </style> </head> <body> <form> <label for="fup">Click to</label> <input type="file" id="fup" /> <input type="text" placeholder="using webkit prefix" /> <button type="submit">Done</button> </form> </body> </html>
यह Google Chrome में निम्न आउटपुट देता है।
