Form Styling in CSS: Crafting Interactive Elements

Inputs, labels, buttons, focus states, validation feedback, and custom checkboxes.

Why forms matter

Forms handle sign-ups, logins, contact messages, and plenty besides. Default browser styling is functional but plain. Good CSS makes fields easier to read and less painful to fill in.

Basic HTML form

Start with a simple structure:

<form class="my-form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

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

Styling inputs and labels

.my-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.my-form input[type="text"],
.my-form input[type="email"],
.my-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

Labels sit above their fields. Inputs get full width, padding, and rounded borders.

Textareas

.my-form textarea {
    height: 100px;
    resize: vertical;
}

resize: vertical lets users drag the height but not the width, so the form layout stays intact.

Submit buttons

.my-form button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
}

.my-form button:hover {
    background-color: #45a049;
}

A clear button colour and a hover state make the submit action obvious.

Focus and hover effects

.my-form input[type="text"]:focus,
.my-form input[type="email"]:focus,
.my-form textarea:focus {
    border-color: #4CAF50;
    outline: none;
}

.my-form label:hover {
    color: #4CAF50;
}

Changing the border on focus shows which field is active. A label hover is optional but can reinforce interactivity.

Responsive forms

@media (max-width: 600px) {
    .my-form input[type="text"],
    .my-form input[type="email"],
    .my-form textarea,
    .my-form button {
        width: 100%;
        margin: 0;
    }
}

On small screens, form elements stretch to full width for easier tapping.

Validation styling

.my-form input:invalid {
    border-color: red;
}

.my-form input:valid {
    border-color: green;
}

Red and green borders give quick visual feedback. Pair this with proper HTML validation attributes for it to work reliably.

Custom checkboxes

Checkboxes and radio buttons can be restyled to match the rest of your form:

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #4CAF50;
}

Keep forms simple and readable. These patterns give you a solid base – adjust colours and spacing to match your site.