HTML Form How to - Create Custom select form control with CSS3

Question

We would like to know how to create Custom select form control with CSS3.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label.custom-select {<!--from  w w  w. j a  va2 s.  c om-->
    position: relative;
    display: inline-block;
}
    .custom-select select {
        display: inline-block;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #000;
        color:white;
        border:0;
    outline:none;
    }
    .custom-select:after {
        content: "0";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 10px;
        background: green;
        color: white;
    }
    .no-pointer-events .custom-select:after {
        content: none;
    }
  </style>
</head>
<body>
  <label class="custom-select">
    <select>
        <option>Sushi</option>
        <option>B</option>
        <option>A</option>
        <option>O</option>
    </select>
</label>
</body>
</html>

The code above is rendered as follows: