Rounded Pill Search Form (SCSS)
Restyles the theme search form and the Search block as a single rounded pill with an inline button and a clear focus ring.
Opens WPIDE on
Code
$accent: #2271b1;
$radius: 999px;
.search-form,
.wp-block-search__inside-wrapper {
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: $radius;
background: #fff;
&:focus-within {
border-color: $accent;
box-shadow: 0 0 0 3px rgba($accent, 0.2);
}
label {
flex: 1;
margin: 0;
}
input[type="search"],
.wp-block-search__input {
flex: 1;
width: 100%;
min-width: 0;
padding: 0.6em 1.1em;
border: 0;
background: transparent;
outline: none;
}
button,
input[type="submit"],
.wp-block-search__button {
margin: 3px;
padding: 0.55em 1.2em;
border: 0;
border-radius: $radius;
background: $accent;
color: #fff;
cursor: pointer;
&:hover,
&:focus {
background: darken($accent, 8%);
}
}
}Notes
Change $accent to your brand color.
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.