Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Custom Search Input Control

Problem: Custom Search Input Control

Try to 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

    • ...