Solution for "change select tag arrow"

.select_box{ width: 200px; overflow: hidden; border: 1px solid #000; position: relative; padding: 10px 0; } .select_box:after{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #f00; position: absolute; top: 40%; right: 5px; content: ""; z-index: 98; } .select_box select{ width: 220px; border: 0; position: relative; z-index: 99; background: none; }

add arrow in select css

.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; }

how to change the select arrow in css

Similar codes for "change select tag arrow"

Latest 'CSS' questions

Added before "change select tag arrow"