# Consistent Form Field Styling (SCSS)

> Gives text inputs, selects, text areas and checkboxes across the site (comments, contact forms, checkout) one consistent, accessible look with clear focus states.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: forms, inputs, scss, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-form-fields-scss/

## Code

```scss
$field-border: #8c8f94;
$field-radius: 6px;
$field-focus: #2271b1;
$field-bg: #ffffff;
$field-padding: .6em .8em;

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: $field-padding;
    border: 1px solid $field-border;
    border-radius: $field-radius;
    background: $field-bg;
    font: inherit;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;

    &:focus {
        border-color: $field-focus;
        box-shadow: 0 0 0 3px rgba($field-focus, .2);
        outline: none;
    }

    &:disabled {
        background: darken($field-bg, 4%);
        cursor: not-allowed;
    }
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.1em;
    height: 1.1em;
    accent-color: $field-focus;
    vertical-align: middle;
}

label {
    font-weight: 600;
}
```

## Notes

Change the variables at the top. Some form plugins add their own styles with higher specificity.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Consistent Form Field Styling (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/