Member Avatar for raju.raghup

Hi,

I applied CSS for html select dropdown box it's working fine in mozilla but not in IE

  • 4 Contributors
  • 3 Replies
  • 110 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

This is a common cross‑browser limitation rather than a simple bug in your CSS. As asked, seeing the actual HTML/CSS helps; without it the usual causes are: IE running in quirks mode (no/old DOCTYPE), CSS specificity or resets overriding your rules, and the fact that Internet Explorer does not honor many styling hooks on native form controls (especially the dropdown arrow). is correct that a script-based replacement is a practical workaround, but there are light CSS patterns that often solve layout/appearance mismatches without throwing away the native control.

Checklist of practical steps to try first:

  • Confirm standards mode by using a valid DOCTYPE (for modern pages use <!DOCTYPE html>).
  • Use IE's developer tools (F12) to examine computed styles and see what rules are being overridden.
  • Avoid heavy styling of option elements; many browsers ignore it.
  • For predictable cross‑browser look, wrap the select and draw the arrow on the wrapper, keeping the native select functional and accessible.

Example pattern (keeps native select but shows a custom arrow):

<div class="select-wrap">
  <select>
    <option>One</option>
    <option>Two</option>
  </select>
</div>

.select-wrap {
  position: relative;
  display: inline-block;
  background: #fff url("arrow.png") no-repeat right center;
  border: 1px solid #999;
}
.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 30px 6px 8px; /* room for arrow */
  width: 100%;
}

Notes and next steps: if IE still refuses the look you want, use a well‑tested replacement that preserves accessibility (examples: Select2 or the jQuery UI selectmenu). Also review MDN's guidance on styling form controls for why some properties behave inconsistently across browsers: .

Recommended Answers

All 3 Replies

Member Avatar for meabed

show your code ?

Member Avatar for Dexin Design

donot working dropdown in ie

Member Avatar for macneato

It's a very common problem. If you really want to style it though, I reckon go with jquery. is a nice example/tutorial of what is really possible and its cross-browser compatible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.