HTML Form How to - Custom Dropdown Icon

Question

We would like to know how to custom Dropdown Icon.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.styled select {<!--from  w  ww .ja  va  2s  . c o m-->
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
}

.styled {
  width: 120px;
  height: 34px;
  overflow: hidden;
  background: url(http://placehold.it/20x20) no-repeat 96%
    #ddd;
}
</style>
</head>
<body>
  <div class="styled">
    <select>
      <option>Apples</option>
      <option selected>Pineapples</option>
      <option>Chocklate</option>
      <option>Pancakes</option>
    </select>
  </div>
</body>
</html>

The code above is rendered as follows: