custom select dropdown

by Ayyappan Sakthivadivel

HTML

<select class="select-css">
  <option>Native select element with a custom dropdown arrow</option>
  <option>Apples</option>
  <option>Bananas</option>
  <option>Grapes</option>
  <option>Oranges</option>
</select>

CSS

body {
  background-color: #000;
  padding: 1em;
}
.select-css {
  display: block;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  padding: .6em 3em .5em .8em;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #000;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHN3aXRjaD48Zz48cGF0aCBmaWxsPSIjOUM5QjlCIiBkPSJNNi4zMDcgMTAuNjY1bC01LjItNi4wODggMS4wOTYtLjkzNSA0LjA1NyA0Ljc1IDMuNzkxLTQuODMzIDEuMTM1Ljg4OHoiLz48L2c+PC9zd2l0Y2g+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: 97% .7em;
}
.select-css::-ms-expand {
  display: none;
}
.select-css:hover {
  border-color: transparent;
}
.select-css:focus {
  border-color: transparent;
  color: #fff;
  outline: transparent;
}
.select-css option {
  font-weight: normal;
}