CSS Forms & Inputs Kaise Style Karein?

Introduction to Styling Forms

HTML forms user se data collect karne ke liye zaroori hote hain, lekin unki default styling bohot plain hoti hai. CSS ka use karke hum form elements jaise text inputs, buttons, checkboxes, aur dropdowns ko apne website ke design ke anusaar customize kar sakte hain. Isse na sirf form sundar dikhta hai, balki user experience bhi behtar hota hai.

1. Styling Text Inputs

Text inputs (<input type="text">, <input type="email">, etc.) form ka sabse common part hote hain. Hum in par width, padding, border, aur border-radius jaise properties apply kar sakte hain.

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding doesn't affect final width */
}

2. Styling Buttons

Buttons ko interactive aur clickable dikhane ke liye styling bohot zaroori hai. :hover pseudo-class ka use karke hum hover effects bhi add kar sakte hain.

button, input[type="submit"] {
  background-color: #007BFF;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover, input[type="submit"]:hover {
  background-color: #0056b3;
}

3. Styling Input Focus State (:focus)

Jab user kisi input field par click karta hai, toh woh 'focus' state me hota hai. :focus pseudo-class ka use karke hum is state ko style kar sakte hain, jisse user ko clear feedback milta hai.

input:focus {
  border-color: #007BFF;
  outline: none; /* Removes default browser outline */
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

4. Styling Placeholder Text (::placeholder)

::placeholder pseudo-element ka use karke hum input field ke andar dikhne wale placeholder text ko style kar sakte hain.

input::placeholder {
  color: #999;
  font-style: italic;
}

5. Styling Checkboxes & Radio Buttons

Modern CSS me, accent-color property ka use karke aap checkboxes aur radio buttons ka color aasaani se badal sakte hain.

input[type="checkbox"],
input[type="radio"] {
  accent-color: #007BFF;
  width: 18px;
  height: 18px;
}

Key Takeaways

• Input fields ko consistent look dene ke liye width: 100% aur box-sizing: border-box ka use karein.
• :hover aur :focus pseudo-classes ka use karke forms ko interactive banayein.
• ::placeholder se aap hint text ko style kar sakte hain.
• accent-color property se checkboxes aur radio buttons ka color badalna aasan hai.
• Styling se pehle default browser styles ko reset karne ke liye appearance: none; ka use kiya jaa sakta hai, par isse custom styling ki zaroorat badh jaati hai.