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! :)
Top comments (0)