# Search Term Highlight Style (SCSS)

> Gives highlighted search words a soft marker-pen look instead of the browser's default yellow box, matching the Highlight Search Terms snippet and any mark elements.

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

## Code

```scss
$marker: #ffe58a;
$marker-dark: #8a6d00;

mark.search-highlight,
.search-results mark {
    padding: 0 0.15em;
    border-radius: 0.2em;
    background: linear-gradient(to bottom, transparent 15%, $marker 15%, $marker 85%, transparent 85%);
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media (prefers-color-scheme: dark) {
    mark.search-highlight,
    .search-results mark {
        background: linear-gradient(to bottom, transparent 15%, $marker-dark 15%, $marker-dark 85%, transparent 85%);
    }
}
```

## Notes

Change $marker to your brand color; dark mode uses a deeper tone automatically.

## How to use it

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