HTML select Tag | Create a drop-down list use
The HTML <select> element is used to create a drop-down list and option tag defines an <option> in a select list. The HTML <select> tag is used for defining a select list. The <option> element to produce a list of options.
Below are the types of HTML select element
1. Select box with default down arrow
HTML
<select class="form-control">
<option>Select Year</option>
<option>2018</option>
<option>2017</option>
</select>CSS
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}2. Select box using down arrow image
HTML
<select class="form-control">
<option>Select Year</option>
<option>2018</option>
<option>2017</option>
</select>CSS
select::-ms-expand {
display: none;
}
select {
padding: 10px 30px 10px 15px;
-webkit-appearance: none;
-moz-appearance: none;
background: #fff url(../img/dropdownIcon.png) no-repeat 95% 55%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}3. Select box using font awesome icon
HTML
<div class="select-wrapper">
<select class="form-control">
<option>Select Year</option>
<option>2018</option>
<option>2017</option>
</select>
</div>CSS
select::-ms-expand {
display: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
.select-wrapper {
position: relative;
}
.select-wrapper:before {
content: '\f0dd';
font-family: Font Awesome 5 Free;
font-weight: 900;
color: #666;
display: inline-block;
position: absolute;
right: 12px;
top: 8px;
pointer-events: none;
font-size: 20px;
}
/* Font Aswsome 4.7.0 Version */
content: '\f107';
font-family: FontAwesome;HTML select default and option tag
In this tutorial we learn that how to create select box with 3 different types that can use in form.
You can customize this code further as per your requirement.
Learn HTML/CSS from W3 School Website