• Custom Printed T-shirts
  • Seo Expert
  • Bisen Infotech
  • Khaali Paper

Html Select Tag

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.

Select Tag

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;

In this tutorial we learn that how to create select box with 3 diffrent types that can use in form.

Select Tag

You can customize this code further as per your requirement.