Full Stack Essentials

# Styling Forms

Default form styles are often plain and uninspiring. They're functional, sure, but they're definitely not winning any design awards. The good news is, we're not stuck with them! You have the power to change that!

In this section, we are going to take a boring old contact form and make it look modern, beautiful and functional. We will be using all the CSS we have learned so far (and especially CSS variables, nesting and advanced selectors) to make this happen.

This section will demonstrate how CSS variables and nesting can simplify your styling process while enhancing the appearance of your form.

# Our Contact Form

# Explanation

We won't go through the HTML code in detail. We'll focus on the CSS code used to style the form. This detailed explanation will help you understand the CSS techniques that we discussed in the previous chapters.

Let's break down the CSS code used to style the contact form and explain each part.

# CSS Variables (Custom Properties)

:root {
    --primary-color: #4a90e2;
    --secondary-color: #2c3e50;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --font-size: 16px;
    --line-height: 1.6;
    --font-family: 'Segoe UI', system-ui, sans-serif;
    --border-radius: 8px;
    --transition-speed: 0.3s;
    --input-padding: 12px;
    --form-width: 100%;
    --max-form-width: 600px;
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Purpose: These lines define CSS variables (also known as custom properties) within the :root pseudo-class. The :root selector matches the root element of the document (the <html> element).

Key Variables:

  • --primary-color: Used for the main interactive elements like buttons and focused input borders.
  • --secondary-color: Used for text and headings.
  • --success-color and --error-color: Used for validation feedback (green for success, red for error).
  • --font-size, --line-height, --font-family: Define the basic typography settings.
  • --border-radius, --transition-speed, --input-padding: Control various aspects of the form’s appearance and animations.
  • --form-width and --max-form-width: Define the width of the form.

# Global Reset & Body Styles

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--font-family);
    line-height: var(--line-height);
}
body {
    background-color: #f5f7fa;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Universal Reset (* selector):

  • padding: 0; margin: 0;: Resets default padding and margin for all elements, providing a clean slate.
  • box-sizing: border-box;: Ensures that padding and border are included within an element’s total width and height, preventing unexpected layout shifts.

Basic Body Styling:

  • font-family: var(--font-family); and line-height: var(--line-height);: Applies the basic typography variables to the whole document.
  • background-color: #f5f7fa;: Sets a light gray background color for the page.
  • padding: 20px;: Adds padding around the content.
  • min-height: 100vh;: Makes the body at least the height of the viewport, important for the flexbox centering below.
  • display: flex;, justify-content: center; and align-items: center;: These properties center the form both horizontally and vertically on the page.

# Form Container Styles

.contact-form {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: var(--form-width);
  max-width: var(--max-form-width);

  h2 {
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .form-group {
    margin-bottom: 1.5rem;
  }
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.contact-form: Styles the main form container.

  • background: white;: Sets the background of the form to white.
  • padding: 2rem;: Adds padding inside the form.
  • border-radius: var(--border-radius);: Applies the defined border radius.
  • box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);: Adds a subtle shadow for depth.
  • width: var(--form-width); and max-width: var(--max-form-width);: The form takes 100% of its container width, but it cannot be wider than the max-width.

h2: Styles the form title.

  • color: var(--secondary-color);, margin-bottom: 1.5rem; and text-align: center;: Styles the h2 element inside the form, sets the color using the secondary color, a bottom margin, and centers the text.

.form-group: Applies margin to the form group elements for spacing.

  • margin-bottom: 1.5rem;: Adds a bottom margin for spacing between the form groups.

# Label Styles

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    font-weight: 500;
}

  
        Copied!
1
2
3
4
5
6

label: Styles all label elements.

  • display: block;: Makes the labels behave like block-level elements, meaning they take up the full width and start on a new line.
  • margin-bottom: 0.5rem;: Adds space below each label.
  • color: var(--secondary-color);: Sets the color of labels to the secondary color.
  • font-weight: 500;: Makes the labels slightly bold.

# Input Field Styles

:is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    width: 100%;
    padding: var(--input-padding);
    border: 2px solid #e1e1e1;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all var(--transition-speed);
  
    &:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    }
  
    &:hover:not(:focus) {
        border-color: #c1c1c1;
    }
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

:is(input[type="text"], ...): Applies the styling to input fields of text, email, and tel type, as well as the select and textarea elements.

  • width: 100%;: Makes input fields take up the full width of their parent containers.
  • padding: var(--input-padding);: Sets the padding using a variable.
  • border: 2px solid #e1e1e1;: Defines a basic grey border.
  • border-radius: var(--border-radius);: Applies the defined border radius.
  • font-size: 1rem;: Sets the font size.
  • transition: all var(--transition-speed);: Adds a smooth animation for all style changes.

:focus: Styles the input on focus.

  • outline: none;: Removes the default outline.
  • border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);: Changes the border color and adds a subtle box-shadow when the input is focused for visual feedback.

:hover:not(:focus): Styles the input on hover.

  • border-color: #c1c1c1;: Changes the border color to a lighter grey on hover if the input does not have the focus.

# Radio and Checkbox Group Styles

.radio-group, .checkbox-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;

    label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12

.radio-group, .checkbox-group: Styles the containers for radio buttons and checkboxes.

  • display: flex; gap: 1rem; margin-top: 0.5rem;: Uses flexbox to align items horizontally with a space between them. Also adds a top margin for spacing.

label: Styles the labels in the radio and checkbox groups.

  • display: flex; align-items: center; gap: 0.5rem; cursor: pointer;: Uses flexbox to align items vertically and adds a space between the input and label text. A pointer cursor is added on hover to hint at clickability.

# Custom Radio and Checkbox Styles

:is(input[type="radio"], input[type="checkbox"]) {
    accent-color: var(--primary-color);
    cursor: pointer;
}

  
        Copied!
1
2
3
4

:is(input[type="radio"], input[type="checkbox"]): Styles the radio buttons and checkboxes directly.

  • accent-color: var(--primary-color);: Sets the primary color as the color for the radio and checkboxes when they are selected.
  • cursor: pointer;: Sets the pointer cursor on hover for better visual feedback.

# Textarea Styles

textarea {
    min-height: 120px;
    resize: vertical;
}

  
        Copied!
1
2
3
4

textarea: Styles the textarea elements.

  • min-height: 120px;: Sets the initial height.
  • resize: vertical;: Allows vertical resizing by the user (but not horizontal).

# Submit Button Styles

button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    transition: background-color var(--transition-speed);
  
    &:hover {
        background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    }
  
    &:active {
        transform: translateY(1px);
  }
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

button[type="submit"]: Styles the submit button specifically.

  • background-color: var(--primary-color); and color: white;: Sets the background color and text color.
  • padding: 1rem 2rem;, border: none; and border-radius: var(--border-radius);: Adds padding, removes border, and applies the border radius.
  • font-size: 1rem;, cursor: pointer; and width: 100%;: Adjusts the font size, adds a pointer cursor, and makes the button take the full width of its parent container.
  • transition: background-color var(--transition-speed);: Adds smooth animation for the background color.

:hover: A darker version of the primary color is used on hover by mixing the primary color with black.

  • background-color: color-mix(in srgb, var(--primary-color) 85%, black);

:active: On active state (when the button is clicked), there is a small transform on the vertical axis.

  • transform: translateY(1px);

# Required Field Indicator

.required::after {
    content: "*";
    color: var(--error-color);
    margin-left: 4px;
}

  
        Copied!
1
2
3
4
5

.required::after: Adds an asterisk to labels with the class "required" to visually indicate that a field is required.

  • content: "*";: Adds the asterisk as generated content after the element.
  • color: var(--error-color); margin-left: 4px;: Sets the color to the error color and adds spacing.

# Form Field Validation States

input:not(:placeholder-shown):valid {
    border-color: var(--success-color);
}

input:not(:placeholder-shown):invalid {
    border-color: var(--error-color);
}

  
        Copied!
1
2
3
4
5
6
7

input:not(:placeholder-shown):valid: Styles valid inputs that don't have the placeholder shown.

  • border-color: var(--success-color);: Sets the border color to green on valid input (when validation is triggered because the placeholder is not shown).

input:not(:placeholder-shown):invalid: Styles invalid inputs that don't have the placeholder shown.

  • border-color: var(--error-color);: Sets the border color to red on invalid input (when validation is triggered because the placeholder is not shown).

:valid and :invalid

  • The :valid and :invalid pseudo-classes are used to style form elements based on their validation state.
  • These pseudo-classes are triggered when the form element is checked against its constraints (like the required attribute) and the user has interacted with the field (e.g., by typing in it).
  • The :valid pseudo-class applies when the field meets its constraints, while the :invalid pseudo-class applies when the field does not meet its constraints.

# Summary

  • This CSS provides a well-structured and responsive style for a contact form.
  • It uses CSS variables for theming, a reset for consistent rendering, flexbox for centering, and smooth transitions for interactivity.
  • It also integrates feedback for input focus and form validation states.
  • This allows for a clean look and a good user experience.
Last Updated: 3/4/2025, 12:53:37 PM