Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Custom Select Dropdown Control

Problem: Custom Select Dropdown Control

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