Select Box design using html and css

hello some select box design




design1 Choose an option… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20


design2 Select an Option 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

design3 Select an Option 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

design4 Select an Option 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

design5
--- choose Your link --- php wordpress magento jquery html

design6(please add div div id="design6" before select box in design check it)

Select Box design 1 Select Box design 2

here css of selectbox put it in and check desing

#design1 { background: none repeat scroll 0 0 steelblue; border: 1px solid; outline: medium none; overflow: hidden; width: 10%; }

#design2{ background: none repeat scroll 0 0 transparent; border: 0 none; color: #eee; font-size: 20px; font-weight: bold; padding: 2px 10px; width: 378px; background-color: #58B14C; border-radius: 25px; }

#design3{ background: none repeat scroll 0 0 transparent; border: 0 none; color: #eee; font-size: 20px; font-weight: bold; padding: 2px 10px; width: 378px; background-color: black; border-radius: 25px; background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); }

#design4{ background-position: 97% center; background-repeat: no-repeat; border: 1px solid #aaa; color: #555; font-size: inherit; margin: 20px; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; width: 300px; }

#design5{background-color:#A2AB58;background-image:url(http://s18.postimg.org/pbf0wwpg5/arrow.png);background-position:300px;background-repeat:no-repeat;border-radius:5px;box-shadow:inset 0 0 10px 0 rgba(0,0,0,0.6);color:#ff0;font-family:Cursive;font-size:20px;line-height:1;margin-top:8px;outline:none;padding:12px;webkit-appearance:none;width:353px;}

#design5:hover{color:#00ff7f;}

#design6{ background: #ddd url("http://s21.postimg.org/u0aq7xjs3/down_arrow_select.jpg") no-repeat scroll right center; border: 1px solid #ccc; height: 34px; overflow: hidden; width: 240px;}
#design6 select{ background: transparent none repeat scroll 0 0; border: 0 none; border-radius: 0; font-size: 16px; height: 34px; line-height: 1; padding: 5px; width: 268px;}

I am Uploaded New Select Box design when i get new design.

Tweet