HTML Select Menu issue in IE11 - html

Question

I have this html for an select control
<select class="form-control">
<option value="0"></option>
<option value="1: 1" >Jr.</option>
<option value="2: 2">Sr.</option>
<option value="3: 3">I</option>
<option value="4: 4">II</option>
<option value="5: 5">III</option>
</select>
It is getting rendered as expected in chrome
chrome image 1
chrome image 2
but in IE, the select option is hiding the control when it is clicked or in other words the the select option is not getting opened from the bottom of the select control as seen in this following screen shot
IE image 1
IE image 2
is this a default behaviour or can I change it? I tried giving using this css but did not work
select.form-control {
width: 100%;
max-width: 325px;
border-width: 0 0 1px 0;
box-shadow: none;
border-radius: 0;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
position: relative;
}
option, select.form-control option {
color: blue !important;
top: 0px !important;
position: absolute !important;
}
any suggestion?

Answer 1

This is standard behavior. Every browser renders elements slightly different and has their own styles for it. Some styles can be changed, others are hidden in the shadow root of the elements and cannot be changed. option sadly has only a few styles like color that can be set...
One solution for this would be to hide the select element and control it via another element that can be styled (e.g. span) and JavaScript. That is not really pretty but many css frameworks already do so and if you absolutely have to make it look good (most of the times that is the case) that is your only option.

Answer 2

Here's a quick example of a custom built select box. As you can see, even putting images in the options is possible now. Hope this helps you.
Fontawesome is used for the caret. Documentation in the JS source code.
// Create a reference to the select box
const selectBox = document.getElementById("selected");
// Add an event listener to detect the click and make the options (in)visible
selectBox.addEventListener("click", function() {
// Add or remove class 'open'
document.getElementById("options").classList.toggle("open");
});
// Put all options in an array
const options = [...document.getElementsByClassName("option")];
// Add event listener for each option
options.map( option => option.addEventListener("click", function() {
// Create a reference to the input field
const myInput = document.getElementById("sel");
// Retrieve the text from the clicked option
const optionText = this.getElementsByTagName("span")[0].innerHTML;
// Put the text in the input field value
myInput.value = optionText;
// Put the text in the select box
selectBox.innerHTML = optionText;
// Close the select box
document.getElementById("options").classList.toggle("open")
}));
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
#selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
#selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
#options {
display: none;
margin: 0;
padding: 0;
}
#options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div id="selected">Select an option</div>
<ul id="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>

Answer 3

You can correct the behavior with CSS
select {
float: left;
display: inline-block;
}
<select class="form-control">
<option value="0"></option>
<option value="1: 1" >Jr.</option>
<option value="2: 2">Sr.</option>
<option value="3: 3">I</option>
<option value="4: 4">II</option>
<option value="5: 5">III</option>
</select>