আমরা CSS pseudo element ::file-selector-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-এ নিম্নলিখিত আউটপুট দেয়৷
৷
