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.
Opens WPIDE on
Code
// 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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.