change color select arrow css cf7

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}

1body {
2  background: #f2f2f2;
3}
4
5.selectdiv {
6  position: relative;
7  /*Don't really need this just for demo styling*/
8  
9  float: left;
10  min-width: 200px;
11  margin: 50px 33%;
12}
13
14/*To remove button from IE11, thank you Matt */
15select::-ms-expand {
16     display: none;
17}
18
19.selectdiv:after {
20  content: '<>';
21  font: 17px "Consolas", monospace;
22  color: #333;
23  -webkit-transform: rotate(90deg);
24  -moz-transform: rotate(90deg);
25  -ms-transform: rotate(90deg);
26  transform: rotate(90deg);
27  right: 11px;
28  /*Adjust for position however you want*/
29  
30  top: 18px;
31  padding: 0 0 2px;
32  border-bottom: 1px solid #999;
33  /*left line */
34  
35  position: absolute;
36  pointer-events: none;
37}
38
39.selectdiv select {
40  -webkit-appearance: none;
41  -moz-appearance: none;
42  appearance: none;
43  /* Add some styling */
44  
45  display: block;
46  width: 100%;
47  max-width: 320px;
48  height: 50px;
49  float: right;
50  margin: 5px 0px;
51  padding: 0px 24px;
52  font-size: 16px;
53  line-height: 1.75;
54  color: #333;
55  background-color: #ffffff;
56  background-image: none;
57  border: 1px solid #cccccc;
58  -ms-word-break: normal;
59  word-break: normal;
60}