how to change the select arrow in css

1.select_box{
2  width: 200px;
3  overflow: hidden;
4  border: 1px solid #000;
5  position: relative;
6  padding: 10px 0;
7}
8.select_box:after{
9  width: 0; 
10  height: 0; 
11  border-left: 6px solid transparent;
12  border-right: 6px solid transparent;
13  border-top: 6px solid #f00;
14  position: absolute;
15  top: 40%;
16  right: 5px;
17  content: "";
18  z-index: 98;
19 }
20.select_box select{
21  width: 220px;
22  border: 0;
23  position: relative;
24  z-index: 99;
25  background: none;
26}

1.styled-select {
2  width: 100px;
3  height: 17px;
4  overflow: hidden;
5  overflow: -moz-hidden-unscrollable;
6  background: url(images/downarrow_blue.png) no-repeat right white;
7  border: 2px double red;
8  display: inline-block;
9  position: relative;
10}
11
12.styled-select select {
13  background: transparent;
14  -webkit-appearance: none;
15  width: 100px;
16  font-size: 11px;
17  border: 0;
18  height: 17px;
19  position: absolute;
20  left: 0;
21  top: 0;
22}
23
24body {
25  background-color: #333333;
26  color: #FFFFFF;
27}
28
29.block label {
30  color: white;
31}