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}