HTML Form How to - Create CSS3 select box

Question

We would like to know how to create CSS3 select box.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
select {<!--  ww w.j a v  a2s . c  om-->
  padding: 3px;
  margin: 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
  background: #f8f8f8;
  color: #888;
  border: none;
  outline: none;
  display: inline-block;
  -webkit-appearance: none;
  cursor: pointer;
}
select {
  padding-right: 18px
}
label {
  position: relative
}
label:after {
  content: '<>';
  font: 11px "Consolas", monospace;
  color: #aaa;
  -webkit-transform: rotate(90deg);
  position: absolute;
  right: 4px;
  top: 2px;
  padding: 0 0 2px;
  pointer-events: none;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
  <label> <select>
      <option selected>Select Box</option>
      <option>A</option>
      <option>This is a test. This is a test. This is a test.</option>
  </select>
  </label>
</body>
</html>

The code above is rendered as follows: