learn2kode.in

Menu

CSS Tutorial

Menu

CSS Forms Styling

Styling forms with CSS helps improve user experience, accessibility, and the overall look of your website. HTML forms contain elements like inputs, textareas, selects, buttons, and labels. With CSS, you can customize their appearance to match your site’s design.

Why Form Styling Is Important

  • Enhances readability and usability
  • Makes forms look modern and professional
  • Improves focus states for better accessibility
  • Helps guide users visually through the form

1. Styling Text Inputs

You can style text fields using CSS to add padding, borders, colors, and transitions.

Copy Text 
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus {
    border-color: #0066ff;
    outline: none;
}

2. Styling Textarea

Copy Text 
textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 6px;
    resize: vertical;
}

3. Styling Select Dropdown

Copy Text 
select {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

4. Styling Checkboxes and Radio Buttons

Modern web design often hides the default input and uses a custom style.

Copy Text 
input[type="checkbox"],
input[type="radio"] {
    accent-color: #007bff;
}

5. Styling Submit Buttons

Buttons should be clear, bold, and noticeable.

Copy Text 
button,
input[type="submit"] {
    background: #007bff;
    color: #fff;
    padding: 12px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

button:hover {
    background: #0056cc;
}

6. Adding Form Layout With CSS

Use CSS Grid or Flexbox to organize form elements neatly.

Flexbox Example:

Copy Text 
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

7. Placeholder Styling

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

8. Error & Success States

Error

Copy Text 
input.error {
    border-color: #e63946;
    background-color: #ffe5e5;
}

Success

Copy Text 
input.success {
    border-color: #2a9d8f;
    background-color: #e8fff7;
}

9. Full Sample Form With CSS

Copy Text 
<form class="styled-form">
  <div class="form-group">
    <label>Name</label>
    <input type="text" placeholder="Enter your name" />
  </div>

  <div class="form-group">
    <label>Email</label>
    <input type="email" placeholder="Enter your email" />
  </div>

  <div class="form-group">
    <label>Message</label>
    <textarea placeholder="Write your message..."></textarea>
  </div>

  <button type="submit">Submit</button>
</form>