🎨CSS & Color

Accessible Form Inputs

Clean styling for text fields, selects, and textareas.

Explanation

Forms are the most important part of many apps; they need to look good and be easy to use.

Examples

Standard Input

Output

padding: 0.5rem, border: 1px solid slate-200

Code Examples

CSS

.input-field {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

Try it Now

Open in Input Styles

💡 Tips

Always include a distinct :focus state
Use placeholder-shown selector for floating labels
Ensure labels are always visible or aria-labeled

⚠️ Common Pitfalls

Removing focus outlines without adding an alternative