Some time we need to style select box. Here I will show you simple example how to do this. For example we have simple select box html:
1 2 3 4 5 6 | <form><select><option>Item One</option><option>Item Two</option></select></form> |
This is style:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | body { font-family: Arial, sans-serif; font-size: 12px;}select { border: 1px solid #ccc; height: 26px; line-height: 18px; margin: 0; padding: 3px; background: transparent none no-repeat; cursor: pointer;}@media screen and (min-width:0) { /* for relatively modern browsers including IE 8+ */ select { border-radius: 4px; background-image: url("data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAAlElEQVRIx+2VwQ3AIAhFwTiFi7KC7uYGHo1z0Et7MWkjaEiaQOJBDzy/wgdqrXwHWKyAiGAZDnSgHBhC+IfCUgqbKXxgGqhY4QyRQkUK35KLoK01iZd+xZKXRuEfbvdQPPGkAABEhMeLhohE5yfaAufk93791r13zQDmnLNqcOMYg1NKmoJgTRHtmDeaWZvPQweaAi8PXSmZJU3QRAAAAABJRU5ErkJggg=="); background-position: -50px -50px; }}@media screen and (-webkit-min-device-pixel-ratio:0) { /* for Webkit */ select { -webkit-appearance: none; background-position: right center; padding: 3px 32px 3px 5px; }}@-moz-document url-prefix() { /* for Firefox */ select { -moz-appearance: none; text-indent: 0.01px; text-overflow: ""; background-position: right center; padding-right: 16px; } /* hides the dotted outline on focus in FF (See SO#3773430) */ select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* for IE10+ */ select::-ms-expand { display: none; } select { background-position: right center; padding-right: 30px; }} |
How it works you can on http://jsfiddle.net/sstur/fm5Jt/
Hope this will help you 