# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Search](https://wpide.com/library/category/search/)
- Tags: scss, search, form
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/pill-search-form-scss/

## Code

```scss
$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 use it

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