So,
I have styled a select tag, and when I view it on IE11/Edge it adds a black border around the select box when you click the dropdown arrow.
I cannot seem to find anything that will remove this border.
Please advise.
here is my CSS
select {
background: transparent;
width: 100%;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 59.6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 17px;
background: url('##Pathtoimg##') no-repeat 96% #ffffff;
outline: 0;
border-color:#fff;
}
It is not possible in IE because element style will vary depending on Browsers. IE use one style where Safari use another style.
We'll take a sample for our example:
<select id="something" name="something">
<option value="1">This is option 1</option>
<option value="2">This is option 2</option>
<option value="3">This is option 3</option>
<option value="4">This is option 4</option>
<option value="5">This is option 5</option>
</select>
Check(run) this in all different browsers. All browsers style for <select>
element will vary.