How To Replace Arrow Dropdown Select In Boostrap

I am trying to remove bootstrap default arrow and insert a new image there, i tried remove the arrow that part I did, I have 2 problems. I don't know how to insert that new imag

Solution 1:

You can try to have a look at the .form-group background attribute.

See more on this post select arrow style change

Solution 2:

You can change it like this:

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}

Here: Change color and appearance of drop down arrow

Solution 3:

This should work for IE 10/11. prob not IE 8/9

`select::-ms-expand{display:none;}`

for the arrow this is just one answer but there are a lot of question on stack that ask this. bootstrap 3 arrow on dropdown menu