Custom Select for Form

Hello guys, now I want to create a custom form select/dropdown.

Let start with the html

<div class="wrapper">

  <label for="country">Country</label>
  <select name="country" id="country"> 
    <option value="US">United States</option>
    <option value="UK">United Kingdom</option>
    <option value="ID">Indonesia</option>
    <option value="SG">Singapore</option>
    <option value="MY">Malaysia</option>
  </select>

</div>

The result:

Now let's give it a style to the dropdown.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;700&display=swap');

* { box-sizing: border-box; }

body, html {
  padding: 0;
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: #181820;
  height: 100%;
}

.wrapper {
  height: 100%;
  padding: 2em;
  display: grid;
  place-content: center;
}

The style above will set the font to Nunito and put the element in the centre of the page, like the image below.

Let's style the label first.

label {
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-weight: bold;
  font-size: 1.2em;
}

From the code above, the label will have a white space from top and bottom with font-size 1.2em and font-weight bold.

Result:

Now give style to dropdown/select.

select {
  padding: 1em;
  width: 130%;
  border-radius: .2em;
  border: 1px solid #acacac;
  color: #181820;
}

Result:

As you can see the dropdown not exactly have white space on the right side after I give it a padding by 1em;
To fix this we need to customise the dropdown.

First, I need to add appearance of the select to none.

select {
  /* previous css code*/

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

Result:

Second, add the dropdown icon from an image as a background with no-repeat and set the size around 14px-18px. Also set position to right alignment, and origin based on the content-box;

select {
  /* previous css code*/

  background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right;
  background-origin: content-box;
}

The full code

That's all. I hope you enjoyed it.
Happy coding! :)