/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

41 votes259 views2 answers
Add ... to long text css
CSS
1 vote247 views1 answer
Make web page float to center of page
CSS
11 votes199 views1 answer
Html no cursor when link
CSS
238 votes322 views5 answers
Include bootstrap
CSS Bootstrap
40 votes270 views6 answers
How to write css
CSS
1 vote254 views1 answer
Hardball rifler
CSS
0 vote249 views1 answer
How to add dotted line after and before text in css
CSS
0 vote179 views1 answer
How to remove horizontal and vertical scrollbar in css
CSS
2 votes228 views1 answer
Css focus outline none
CSS
8 votes223 views1 answer
Remove styles button
CSS