Using HTML and CSS to create a custom drop-down list

A drop-down list is a popular user interface component used in web development. It allows users to select an option from a list that is displayed when the user clicks on a drop-down button. In this tutorial, we will learn how to create a custom drop-down list using HTML and CSS.

Step 1: Create the HTML structure

The first step is to create the HTML structure for the drop-down list. We will create a simple form that includes a drop-down list and a submit button. Here's the HTML code:

<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

In the above code, we have used the <form> element to create a form. The <label> element is used to create a label for the drop-down list. The <select> element is used to create the drop-down list, and the <option> element is used to create the options within the drop-down list.

Step 2: Style the drop-down list using CSS

Next, we will style the drop-down list using CSS. We will use CSS to change the color, font, and style of the drop-down list. Here's the CSS code:

select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #fff;
  color: #333;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

In the above code, we have used the select selector to style the drop-down list. We have set the width, padding, margin, display, border, border-radius, box-sizing, font-size, background-color, and color properties of the drop-down list.

We have also used the input[type=submit] selector to style the submit button. We have set the background-color, color, padding, margin, border, border-radius, and cursor properties of the submit button.

Step 3: Customize the drop-down list using CSS

Now, we will customize the drop-down list further using CSS. We will use CSS to change the appearance of the drop-down button, the drop-down list, and the options within the drop-down list. Here's the CSS code:

/* Customize the drop-down button */
select::-ms-expand {
  display: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-512.png');
  background-repeat: no-repeat;
  background-position: center right;
}

/* Customize the drop-down list */
select:focus {
  outline: none;
  border: 1px solid #6c757d;
}

/* Customize the options within the drop-down list */
option {
  background-color: #fff;
  color: #333;
}

In the above code, we have used the select::-ms-expand selector to hide the default drop-down arrow in Internet Explorer. We have also used the appearance, -webkit-appearance, and -moz-appearance properties to remove the default appearance of the drop-down button in different browsers.

We have used the background-image, background-repeat, and background-position properties to add a custom arrow icon to the drop-down button.

We have used the select:focus selector to add a border to the drop-down list when it is in focus. We have also used the option selector to customize the appearance of the options within the drop-down list.

Step 4: Add functionality using JavaScript

Finally, we can add functionality to the drop-down list using JavaScript. We will use JavaScript to display the selected option when the user submits the form. Here's the JavaScript code:

const form = document.querySelector('form');
const select = document.querySelector('select');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  alert(`You selected: ${select.value}`);
});

In the above code, we have used the querySelector method to select the form and the drop-down list. We have then used the addEventListener method to add a submit event listener to the form.

When the user submits the form, the event listener function will prevent the default form submission behavior using the preventDefault method. The function will then display an alert message that shows the selected value of the drop-down list using the value property.

Conclusion

In this tutorial, we have learned how to create a custom drop-down list using HTML, CSS, and JavaScript. We have created a simple form that includes a drop-down list and a submit button. We have then used CSS to style and customize the appearance of the drop-down list. Finally, we have used JavaScript to add functionality to the drop-down list. With this knowledge, you can create custom drop-down lists for your own web projects.