How to create Custom select box using CSS?

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style”on the select field.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *