Dropdown css in ie not working

Question

I have one problem in css dropdown, i want to make both look exactly alike. can someone help me to this.

This was shown in chrome i want to render these styles in all browsers.

enter image description here

But in ie and safari it look like this.

enter image description here

What have you tried and why doesn't it work? For example, what css code are you using to style this? — Emil Lundberg, Jul 18 '14 at 06:00
I guess you want custom arrow style ..check this link. http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox — Kheema Pandey, Jul 18 '14 at 06:02
Share your code and tries, otherwise members maybe will downvote your question — Rami Alshareef, Jul 18 '14 at 06:24
Sorry guys, these are the css of selectselect { -webkit-appearance: menulist; box-sizing: border-box; align-items: center; border: 1px solid; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; white-space: pre; -webkit-rtl-ordering: logical; color: black; background-color: white; cursor: default; } — Arivarasan Arumugam, Jul 18 '14 at 07:25
It works without any bgimage in chrome but in ie problem occurs. to your reference this is not my design, im just fixing the issue. — Arivarasan Arumugam, Jul 18 '14 at 07:27

score 0 · Accepted Answer · answered Jul 18 '14 at 06:11

0

in your css file you have to add this keywords for support in different browsers

-moz for mozilla and chrome -webkit for safari -o for opera -ms

and i think the the css would work fine with ie 10.0

here's an ex.

div { -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; }

answered Jul 18 '14 at 06:11

Ajay Ganvir

367
2
7
23

I don't understand how `transition` comes in this scenario? – Kheema Pandey Jul 18 '14 at 06:18
no juz gave an example for cross browser .i used transition juz to show the use of webkit. Its not related to the dropdown code but i think the code is facing cross browser issue – Ajay Ganvir Jul 18 '14 at 06:21
actually OP want custom arrow for select element, As by default select arrow behave differently for every browser. – Kheema Pandey Jul 18 '14 at 06:23

score 0 · Answer 2 · answered Jul 18 '14 at 06:22

If you need to add custom arrow for select element you have to wrap the select element inside a div and then give overflow:hidden. check the DEMO.

.custom-select{ 
  width:80px;
  overflow:hidden;
}

select {
   width:100px;
   -webkit-appearance: none;
   -moz-appearance: none;
    appearance: none;
   background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') no-repeat 58px center;
}

HTML is like this.

<div class="custom-select">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

Dropdown css in ie not working

2 Answers2