Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Select Dropdown Control

Solution: Custom Select Dropdown Control

Let’s create a custom-styled select dropdown by hiding the default arrow and adding a custom icon with smooth border transitions.

We'll cover the following...

Problem description

Given an HTML page containing a div with class custom-select-wrapper that wraps a <select class="custom-select"> element with several <option>s, write CSS to:

  • Remove the native dropdown arrow using appearance: none (cross-browser).

  • Style .custom-select as follows:

    • Width should be 200px, height should be 40px ...