← Back to Chapters

CSS Forms

? CSS Forms

⚡ Quick Overview

CSS forms let you transform plain browser inputs into clean, modern and user-friendly UI elements. By styling inputs, textareas, selects and buttons, you can guide users’ focus, improve readability and make forms feel more professional and responsive.

? Key Concepts

  • Element selectors like input, textarea, select target all form fields of that type.
  • Attribute selectors like input[type="text"] style only specific kinds of inputs.
  • Focus states with :focus make active fields stand out for better usability.
  • Box sizing with box-sizing: border-box; keeps widths predictable.
  • Visual hints like icons and animations make searching and typing feel smoother.

? Syntax & Theory

Form styling is usually done by combining type selectors (e.g. input), attribute selectors (e.g. input[type="text"]) and pseudo-classes (e.g. :focus). You define padding, margin, border, background-color, and other properties to control the look and feel.

? Code Examples

? Styling Input Fields

? View Code Example 
/* Basic full-width text inputs */
input {
width: 100%;
}

input[type="text"] {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

? Bordered Inputs

? View Code Example 
/* Inputs with rounded colored borders */
input[type="text"] {
border: 2px solid red;
border-radius: 4px;
}

? Bottom Border Only

? View Code Example 
/* Minimal input with only bottom border */
input[type="text"] {
border: none;
border-bottom: 2px solid red;
}

? Colored Inputs

? View Code Example 
/* Text input with custom background and text color */
input[type="text"] {
background-color: #3CBC8D;
color: white;
}

?️ Focused Inputs

? View Code Example 
/* Highlight input when user focuses it */
input[type="text"]:focus {
background-color: lightblue;
border: 3px solid #555;
}

? Input with Icon

? View Code Example 
/* Add a search icon inside the input */
input[type="text"] {
background-color: white;
background-image: url("searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

? Animated Search Input

? View Code Example 
/* Smoothly expand input width on focus */
input[type="text"] {
transition: width 0.4s ease-in-out;
}

input[type="text"]:focus {
width: 100%;
}

?️ Styling Textareas

? View Code Example 
/* Multi-line text area with fixed size */
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

? Styling Select Menus

? View Code Example 
/* Simple full-width dropdown menu */
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

?️ Styling Buttons

? View Code Example 
/* Reusable form buttons (submit, reset, etc.) */
input[type=button],
input[type=submit],
input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

? Live Output / Explanation

With these styles applied, your text inputs stretch to full width, have comfortable padding, and visually react when focused. Search fields can show an icon on the left, and smoothly expand when the user clicks into them. Textareas appear as neat boxes with rounded corners and a fixed size, while buttons stand out with a solid background and clear hover target.

Together, these patterns create a form that is easy to scan, easy to click, and visually consistent across different input types.

? Tips & Best Practices

  • Use box-sizing: border-box; so padding and border are included in the element’s total width.
  • Always style the :focus state to help users see which field is active.
  • Use consistent padding, border-radius and font-size across inputs for a unified look.
  • resize: none; on textarea is useful when you want to keep layouts fixed.
  • Ensure enough color contrast between background and text for accessibility.

? Try It Yourself

  1. Create a login form with username, password and a Remember me checkbox, then style it using the input and button rules above.
  2. Add a search bar that shows a search icon and expands to full width on focus.
  3. Build a feedback form with a styled textarea and select menu for rating (1–5), keeping all elements the same width.
  4. Experiment with different focus styles (border color, box-shadow) while maintaining accessibility and readability.