1

I had used the following code in IE, it works only in IE 10, but it is not working in IE 8, 9 - select dropDown arrow want to hide at least IE9. Please help me.

<select  class="dropDown">
    <option>mango</option>
    <option>banana</option>
    <option>pomegranate</option>
    <option>papaya</option>
</select>


select.dropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : #666;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
select.dropDown::-ms-expand
    display: none;
}
Sarfaraz Alam
  • 149
  • 2
  • 2
  • 9
  • 1. Define _not working_. 2. `appearance` property is not supported in IE < 10 (and Opera). 3. setting `text-indent` value to `0.01px` makes no sense. Lowest possible value greater than 0 is 1. – matewka Nov 08 '13 at 13:37
  • See also [How to hide drop down arrow in ie9](http://stackoverflow.com/questions/19407332/how-to-hide-drop-down-arrow-in-ie9/19408178#19408178) which is an exact dup. – Spudley Nov 08 '13 at 13:38
  • Appearance is a new one. < IE10 wont have this at all. – ggdx Nov 08 '13 at 13:38

1 Answers1

1

As stated in the comments. The appearance propertie isn't support in IE 9 and below. I created something similar in the past. Basically what i did was creating a element on top of the arrow of the select element.

The element is just absoluted positioned and the background is static, the same as the webpage background:

selectbox
{
    position: relative;
    width: 200px;
    height: 200px

}

label 
{
    display: inline-block;
    position: absolute;
    right: 0;
    height: 23px;
}

label:after 
{
    content: '';
    width: 16px;
    height: 23px;
    position: absolute;
    right: 2px;
    color: #868583;
    background: white;
    border-left: 1px solid #868583;
    padding-left: 2px;
}

label > select 
{
    float: right;
    background: transparent;
    border: 1px solid #575757;
    color: #575757;
    font-size: 14px;
    letter-spacing: 2px;
    font-family: Arial;
    height: 100%;
}

You may want to use pointer-events: none; on the overlapping element when you want to be able to click through it.

I display the outline focus so you can't see it outline the original selectboxs width:

select::-moz-focus-inner {
  border: 0;
}

select:focus
{
  outline: none;
}

jsFiddle

This is just a quick example of i did it, hope you find it usefull.

Update

You can use this code for when users use IE else you can use your code.

nkmol
  • 8,025
  • 3
  • 30
  • 51
  • Thanks for giving me jsFiddle link, But it's not work properly IE10, 9 both did you check it? nkmol – Sarfaraz Alam Nov 08 '13 at 20:23
  • I really thought i tested it, my bad! Fixed it with a new [jsFiddle](http://jsfiddle.net/gqRHh/8/). You can use this combines with something like *[this](http://www.quirksmode.org/css/condcom.html)*. – nkmol Nov 08 '13 at 21:51
  • Thanks again, but one thing if i clicked it in IE10, 9 dropdown is increased to right side. We want simply dropdown as it is. like chrome and firefox. Can you plz fix it nkmol? – Sarfaraz Alam Nov 08 '13 at 23:11
  • IE10 does behave by default different then it does in chrome(same as shown with IE9. I could change IE9 but you might wont to try something yourself: **[jsFiddle](http://jsfiddle.net/gqRHh/10/)** I hope this answer was usefull and don't forget to accept my answer when it was :) – nkmol Nov 09 '13 at 01:12