Search Bar State based color interactions

Design help Animations & Interactions
1

I am working on a website for a client and they have a style guild that I need to follow.

Below is the Figma of the search field.

Breakdown of the below image;

  1. Default Stage
  2. Focused state (Please note there is no hover state for the entire element)
  3. Focused (keyboard) < don’t need help with this

image

None of that would be an issue if it wasn’t for the fact that the text color (icon) needs to changed based on the state of the search field.

Breakdown of the below image:
Top Left: Default State
Top Right: Default hover state
Bottom Left: Default focus state
Bottom Right: Hover focus state.

Basically no matter what the state is it needs to turn #D14210 when hovered. However, based on the state of the search field it will need to change back to either #FFFFFF or #2D2F32

image

The icon is actually a font: Material Symbols and Icons - Google Fonts

So I dont need to change an SVG color etc.

Here is my public share link: [LINK][1]

2

I would probably do this using custom CSS, to take advantage of sibling selectors. Combine that with focus, something like;

<style>
.search-input:focus + .search-button {
    color: red;
}
</style>
1 Like