Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Search Input Control

Solution: Custom Search Input Control

Let’s create a custom search input with a styled icon, smooth focus expansion, and no default browser decorations.

We'll cover the following...

Problem description

Given an HTML page containing a div with class search-wrapper that wraps an <input type="search" class="custom-search" placeholder="Search...">, write CSS to:

  • Remove native search decorations and clear button using WebKit pseudo-elements:

    • ::-webkit-search-decoration

    • ::-webkit-search-cancel-button

    • ::-webkit-search-results-button

    • ::-webkit-search-results-decoration

  • Style .search-wrapper with ...