Drop-down arrows in the select fields are not showing

The following is a basic select element with its options.

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Now let’s see where your issue is:

select {
  /*webkit browsers */
  -webkit-appearance: none;
  /*Firefox */
  -moz-appearance: none;
  /* modern browsers */
  appearance: none;
  border-radius: 0;

}

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

When you set none to appearance you are removing the arrow, and when you set 0 to border-radius you are removing the border of the select by default.

You can restore the arrow by setting the appearance to menulist (i.e., the default value) or listbox or auto.

NB: If you have hidden the arrow in IE with this rule select::-ms-expand { display: none; }, then you would need to set it to display: block to get the arrow back.