HTML Select Menu issue in IE11

select dropdown not working in ie
ios select box styling
css style select
style text in select
mobile select css
custom select element
css select height
select input css

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>

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.

Drop Down Menu not working in IE 11 - HTML & CSS, I am having problems with the drop down box when I am using IE 11.0.​9600.17207 When I mouse over and scroll down the the top navigation  I have an issue in IE 11 for html select option. I have Select list which loads multiple items. I am able to select an item from the list for the first time. when i try to move into next item by using touchpad,it's not moving to next item (when we move into next item, the selected item is highlighted in blue background color.instead of that

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>

DropDown issue in IE11, We are migrating from IE8 to IE11, the same dropdowns work fine in IE8. I have 2 issues with IE11,. 1. When I am clicking on my dropdown list, all  Open Internet Explorer by clicking the Start button. In the search box, type Internet Explorer, and then in the list of results, click Internet Explorer. Click the Tools button, and then click Manage Add-ons. Click an add-on in the Name list, and then click Disable. Repeat step 3 until you identify the add-on that is causing the problem.

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>

Dropdown function not working on Internet Explorer 11, Original title: Cant Post a question and I think IE11 is the issue. When i use IE-11 on this screen and click on the Category dropdown it does not  The logical fix is to constrain the width of these select boxes. Well-behaved browsers have no problem with this approach. Internet Explorer, however, interprets a width on the select tag very literally. The select box and all of the options are limited to the specified width, regardless of whether this truncates 90% of the option text.

Select Cuts Off Options In IE (Fix), the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. When mouse cursor goes over select element set the width to auto so it Update August 2012: There is another dedicated project to this fix called IE 8 CodePen is a place to experiment, debug, and show off your HTML, CSS, and  See if the Compatibility View button appears in the address bar. (If you don't see the button, there's no need to turn on Compatibility View.) Select the Compatibility View button to display the site in Compatibility View. To clear the list of Compatibility View sites. Open Internet Explorer, select the Tools button , and then select Internet options.

How to Fix Dropdown Problems on Internet Explorer, Apparently it's a browser bug specific to Microsoft's Internet Explorer. All you need to do is Google “IE select box problem” and you'll see the  For some reason, IE doesn't see the selected value change at all - it uses the initial value. No update panels or anything, so I am not sure what is going on. I have the if not ispostback in my page load, so I know that is not causing an issue.

Styling a Select Like It's 2019, The HTML for the select above is shown below. Note that the CSS class="​select-css"> <option>This is a native select element</option> I am facing dropdown issues in IE11. We are migrating from IE8 to IE11, the same dropdowns work fine in IE8. I have 2 issues with IE11, 1. When I am clicking on my dropdown list, all the values are coming fine in all the older versions of IE but not in IE11.

Comments
  • share your whole code
  • It appears you have some CSS package that enhances the styling on your elements. This is greatly important to include in order to recreate the problem you're having as it's highly likely that it's the reason of your error.
  • @Johan i have updated my question, please havev a look
  • With a little bit of javascript you can simulate a select box and style it any way you want.
  • i am using angular and the template for the dropdown is already set to the SELECT control now we cannot change it
  • can anyone help me with the select control on how to render the option menu at the end of the select control, thanks
  • Are you sure that this is possible? Tested with IE11 and the problem is still there...
  • which version are you using.. I tried with in IE with correct result.
  • @karthickj25 i am using IE11