ফর্ম তৈরি করার সময় ইনপুট ফিল্ডগুলো স্টাইল করে ইউজার এক্সপেরিয়েন্স বাড়ানো যায়। CSS Input Type Selector ব্যবহার করে নির্দিষ্ট টাইপের ইনপুট টার্গেট করা সম্ভব।
সিনট্যাক্স
input[type="<type>"] { /* styles */ }
টেক্সট ইনপুট স্টাইল করা
input, label {
font-size: 2rem;
padding: 1rem;
}
input[type="text"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
border: 0;
border-left: 0.3rem solid mediumspringgreen;
border-radius: 0.5rem;
}
ড্রপডাউন (Select) স্টাইল করা - গুরুত্বপূর্ণ ক্যাভিয়াট
input[type="select"] কাজ করে না! ড্রপডাউন হলো <select> এলিমেন্ট, তাই সিলেক্টর হবে:
select {
padding: 2rem;
font-size: 2rem;
width: 25rem;
border: none;
border-bottom: 0.3rem solid mediumspringgreen;
}
অন্যান্য ইনপুট টাইপ স্টাইল করা
input[type="number"],
input[type="date"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
সাধারণ ইনপুট টাইপসমূহ
- text, email, password, number, date, tel, url, search
- checkbox, radio, range, color, file
- submit, reset, button, image
- select (แยก এলিমেন্ট), textarea (แยক এলিমেন্ট)
উপসংহার
input[type="type"] সিলেক্টর ব্যবহার করে নির্দিষ্ট ইনপুট টাইপ স্টাইল করুন। ড্রপডাউন için select এলিমেন্ট টার্গেট করুন। একই স্টাইল প্যাটার্ন একাধিক টাইপে প্রয়োগ করতে কমা দিয়ে গ্রুপ করুন।
