Select Box Style using CSS


In this Tutorial, we provide some style for “Select Box” using CSS. Most of the websites & designers use Default Select Box style. It (default style) could best option for the White Background websites. If you plan to put any background colors than white color, you can use this Css Select Box Style to give more attraction than the default one.

Step 1: (Copy and Paste the below CSS Coding in your stylesheet)

CSS Coding:
.select-box {
width:100px;
height: 25px;
float:left;
color:#8B5823;
overflow: hidden;
background: url(http://www.gbgbu.com/tutorials/css/images/select-box/arrow.png) no-repeat right #F1DAA3;
border: 1px solid #8B5823;
}

.select-box select {
width: 100px;
height: 25px;
background: transparent;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
border: 0;
border-radius: 0;
-webkit-appearance: none;
}


Step 2:
(Download the arrow.png image from the below link)

Download Image


Step 3:
(Copy and Paste the HTML Code in to your Html File)

<div class=" select-box">

<select>

<option>Drop Down 1</option>

<option>Drop Down 2</option>

<option>Drop Down 3</option>

</select>

</div>


Note: Do not forget to Link your CSS File & Modify the image path in the ‘CSS Code’

Browse by Categories