Onjsdev

Share


A dropdown list, also known as a drop-down menu, drop menu, pull-down list, or picklist, is a common graphical user interface (GUI) element.

How to Create A HTML Dropdown List


By onjsdev

Dec 28th, 2023

A dropdown list, or a drop-down menu provide a way to present a list of options to the user, allowing them to select a single choice. Let's see how to create a HTML dropdown list in this guide.

Basic Structure

Here's the basic structure:

<select>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
 </select>
  • <select>: This tag defines the dropdown list itself.
  • <option>: Each option within the dropdown is represented by this tag.

An Example

Here is an example:

 HTML dropdown list

<select name="color" id="color-selector">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

You can add the <label> tag to associate a label with the dropdown, improving accessibility:

<label for="color-selector">Choose a color:</label>
<select name="color" id="color-selector">
   /*Options go here*/
</select>

Default selection:

Set the selected attribute on an <option> to make it the default choice:

<option value="blue" selected>Blue</option>

Styling with CSS:

You can easily customize the appearance using CSS:

/* Example styling */
select {
  width: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

Customize Dropdown Arrow

Firstly, you need to hide the default arrow and Create a custom arrow:

select {
  -webkit-appearance: none;  /* Safari and Chrome */
  -moz-appearance: none;     /* Firefox */
  appearance: none;         /* Standard */
}

select::after {
  content: "";
  background-image: url("your-arrow-image.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

Conclusion

A dropdown list, also known as a drop-down menu, drop menu, pull-down list, or picklist, is a common graphical user interface (GUI) element.

In this article, we have showed how to create a HTML dropdown list.

Thank you for reading.