আমরা 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*/ }উদাহরণ
নিচের উদাহরণগুলো CSS file-selector-button সিলেক্টর ব্যাখ্যা করে।
<!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">ক্লিক করুন</label> <input type="file" id="fup" /> <input type="text" placeholder="যাদুকরী টেক্সট এখানে" /> <button type="submit">হয়েছে</button> </form> </body> </html>এটি Firefox ওয়েব ব্রাউজারে নিচের আউটপুট দেয়।
উদাহরণ
<!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">ক্লিক করুন</label> <input type="file" id="fup" /> <input type="text" placeholder="webkit প্রিফিক্স ব্যবহার" /> <button type="submit">হয়েছে</button> </form> </body> </html>এটি Google Chrome-এ নিচের আউটপুট দেয়।
