हम सीएसएस छद्म तत्व ::फ़ाइल-चयनकर्ता-बटन का उपयोग करके फ़ाइल अपलोड बटन को स्टाइल कर सकते हैं। हालांकि, इस छद्म तत्व का पूर्ण समर्थन Firefox और Firefox Android तक ही सीमित है।
::- webkit-file-upload-button का उपयोग सफारी, क्रोम और ओपेरा को सपोर्ट करने के लिए किया जाता है।
सिंटैक्स
CSS फ़ाइल-चयनकर्ता गुण का सिंटैक्स इस प्रकार है -
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS फ़ाइल-चयनकर्ता-बटन चयनकर्ता का वर्णन करते हैं।
<!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> यह फ़ायरफ़ॉक्स वेब ब्राउज़र में निम्न आउटपुट देता है।
उदाहरण
<!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 में निम्न आउटपुट देता है।
