HTML Form How to - Style Custom select form controls with CSS3








Question

We would like to know how to style Custom select form controls with CSS3.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label {<!--from   w w  w  .ja va  2s .co  m-->
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  padding: 4px 3px 5px 5px;
  width: 150px;
  outline: none;
  color: #000;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background-color: #fff;
}
/* Select arrow styling */
.notIE label:after {
  content: '';
  width: 23px;
  height: 23px;
  position: absolute;
  display: inline-block;
  top: 4px;
  right: 4px;
  background: url(your icon here) no-repeat right center white;
  pointer-events: none;
}
</style>
</head>
<body>
  <div class="notIE">
    <label /> <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: