/CSS/How to change the select arrow in css

How to change the select arrow in css

Css style select arrow color

.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;
}

Source: stackoverflow.com

How to change the select arrow in 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;
}

Source: stackoverflow.com

Similar codes

9 votes345 views1 answer
Make background full on every screen css
CSS
22 votes353 views4 answers
Grid center align css
CSS
0 vote389 views2 answers
Désactiver le hotlinking de vos images
CSS
0 vote335 views1 answer
Unable to select text in website css cursor type
CSS
0 vote334 views1 answer
Hex color code for tan
CSS
0 vote374 views1 answer
Vue center components in body
CSS
0 vote334 views1 answer
Css aufzählungszeichen entfernen
CSS
12 votes356 views3 answers
Css background image size fit screen
CSS
45 votes339 views6 answers
How to remove background color in css
CSS
32 votes381 views6 answers
Alert bootstrap
CSS