0

I am trying to remove the default Bootstrap arrow and insert a new image in its place. I was successful in removing the arrow, but I have 2 other problems.

I don't know:

  • how to insert a new image in the select tag.

  • why the css below does not remove the arrow in ie11?

My code can be found here: my jsfiddle: https://jsfiddle.net/n4Lob0t1/

html:

<div class="form-group">
          <label for="DevelopmentTool">Development Tool</label>
          <form >
            <select class="form-control">
              <option></option>
            </select>
          </form>
</div>

css:

   select.form-control {
   -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
 }
Francois Louw
  • 143
  • 2
  • 3
  • 13
raduken
  • 2,091
  • 16
  • 67
  • 105

3 Answers3

1

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

Community
  • 1
  • 1
Sundaze
  • 195
  • 1
  • 3
  • 11
1

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

See more on this post select arrow style change

Community
  • 1
  • 1
Rafnuss
  • 119
  • 1
  • 14
1

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

Community
  • 1
  • 1
John Mc Gowan
  • 41
  • 6