DEV Community

Sekti Wicaksono
Sekti Wicaksono

Posted on • Edited on

2

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>
Enter fullscreen mode Exit fullscreen mode

The result:
Html

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Let's style the label first.

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

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:
CSS-2

Now give style to dropdown/select.

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

Result:
CSS-2

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;
}
Enter fullscreen mode Exit fullscreen mode

Result:
CSS-3

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;
}
Enter fullscreen mode Exit fullscreen mode

The full code

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more