CSS দিয়ে একটি HTML ফর্মের চেহারা অনেক উন্নত করা যায়:
ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করতে width প্রপার্টি ব্যবহার করুন:
input {
width: 100%;
}উপরের উদাহরণটি সব <input> এলিমেন্টে প্রযোজ্য। শুধু একটি নির্দিষ্ট ইনপুট টাইপ স্টাইল করতে চাইলে, আপনি অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে পারেন:
input[type=text] - শুধু টেক্সট ফিল্ড সিলেক্ট করবেinput[type=password] - শুধু পাসওয়ার্ড ফিল্ড সিলেক্ট করবেinput[type=number] - শুধু নাম্বার ফিল্ড সিলেক্ট করবেটেক্সট ফিল্ডের ভেতরে জায়গা যোগ করতে padding প্রপার্টি ব্যবহার করুন।
টিপস: একের পর এক অনেক ইনপুট থাকলে, তাদের বাইরে আরও জায়গা যোগ করতে
আপনি কিছু marginও
যোগ করতে চাইতে পারেন:
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}লক্ষ্য করুন যে আমরা box-sizing প্রপার্টি border-box-এ সেট করেছি। এটি নিশ্চিত করে যে padding এবং শেষমেশ বর্ডার এলিমেন্টগুলোর মোট প্রস্থ ও উচ্চতার মধ্যে অন্তর্ভুক্ত থাকে।
আমাদের CSS Box Sizing চ্যাপ্টারে box-sizing প্রপার্টি সম্পর্কে আরও পড়ুন।
বর্ডারের আকার ও রঙ পরিবর্তন করতে border প্রপার্টি ব্যবহার করুন, এবং
গোলাকার কোণা যোগ করতে border-radius প্রপার্টি ব্যবহার করুন:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}শুধু একটি নিচের বর্ডার চাইলে, border-bottom প্রপার্টি ব্যবহার করুন:
input[type=text] {
border: none;
border-bottom: 2px solid red;
}ইনপুটে একটি ব্যাকগ্রাউন্ড কালার যোগ করতে background-color প্রপার্টি ব্যবহার করুন, এবং টেক্সটের রঙ পরিবর্তন করতে color প্রপার্টি ব্যবহার করুন:
input[type=text] {
background-color: #3CBC8D;
color: white;
}ডিফল্টভাবে, কিছু ব্রাউজার ইনপুট ফোকাস পেলে (ক্লিক করা হলে) তার চারপাশে একটি নীল আউটলাইন যোগ করে। ইনপুটে outline: none; যোগ করে আপনি এই আচরণ বন্ধ করতে পারেন।
ইনপুট ফিল্ড ফোকাস পেলে কিছু করাতে :focus সিলেক্টর ব্যবহার করুন:
input[type=text]:focus {
background-color: lightblue;
}input[type=text]:focus {
background-color: pink;
}ইনপুটের ভেতরে একটি আইকন চাইলে, background-image প্রপার্টি ব্যবহার করুন এবং background-position প্রপার্টি দিয়ে এটি পজিশন করুন। এটাও লক্ষ্য করুন যে আইকনের জায়গা রাখতে আমরা একটি বড় বাম প্যাডিং যোগ করেছি:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}টিপস: টেক্সট এরিয়া রিসাইজ হওয়া বন্ধ করতে resize প্রপার্টি ব্যবহার করুন (নিচের-ডান কোণের "গ্র্যাবার" নিষ্ক্রিয় করুন):
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* টিপস: ফুল-উইথ বাটনের জন্য width: 100% ব্যবহার করুন */