# Clean Comment Form Styles

> Gives the comment form full-width fields, rounded corners, a clear focus color and a solid submit button that match your accent color.

- Type: SCSS
- Runs: Site-wide header
- Category: [Comments](https://wpide.com/library/category/comments/)
- Tags: comments, design, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/clean-comment-form-styles/

## Code

```scss
// Style settings.
$accent: #2271b1;
$radius: 8px;
$border: rgba(127, 127, 127, .4);

#respond,
.wp-block-post-comments-form {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
        width: 100%;
        max-width: 100%;
        padding: .7em .9em;
        border: 1px solid $border;
        border-radius: $radius;
        background: transparent;
        color: inherit;
        box-sizing: border-box;

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

    .form-submit input[type="submit"],
    .wp-block-button__link {
        padding: .75em 1.5em;
        border: 0;
        border-radius: $radius;
        background: $accent;
        color: #fff;
        cursor: pointer;

        &:hover {
            background: darken($accent, 8%);
        }
    }
}
```

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Clean Comment Form Styles" 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/