CODEWITHSUNDEEP
htmlcssinternet-explorer
Rotan075
Rotan075

Reputation: 2615

Custom Select box doesn't work properly in IE

I have created a custom dropdown box which can be seen here: JSFIDDLE.

The lay-out is just what I wanted and within Chrome and Firefox it works perfectly. But the problems lies within IE (11,10,9,8). When you try to click on the blue arrow nothing happens. While if you click on the blue arrow in Chrome or Firefox the dropdown will open. I tried using several CSS IE hacks but with no success. Can anyone tell me if this can be fixed?

My CSS:

select\9 {
    display: none;
}
select::-ms-expand {
    display: none;
}
select {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    text-overflow: '';
    /* this is important! */
}
.custom-select {
    position: relative;
    overflow: hidden;
    border: 1px solid #cacaca;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px 1px rgba(204, 204, 204, .4);
    color: #0085c8;
    width:200px;
}
.custom-select:after {
    background-color: #fff;
    border-left: 1px solid #cacaca;    
    content: "\25bc";
    display: block;
    font-size: 1em;
    line-height: 1em;   
    padding: 11px 13px 11px 11px;   
    position: absolute;
    right: 13px;    
    text-align: center;
    top: 3%;
    width: 0;   
    z-index: 2; 
    box-sizing: inherit;
    height:100%;

    /* IE */
    line-height: 3em\9;
    padding: 0px 13px 0px 11px\9;
    right: 0px\9;
    width: 10px\9;
    z-index: 4\0;
}
.custom-select select {
    background: 0 0;
    height: 80%;
    outline: 0;
    width: 100%;
    width: 180%\9;
    font-size: 14px;
    line-height:1.1em;
    border: 0;
    border-radius: 0;
    padding: 9px 38px 9px 10px;
    position: relative;
    z-index: 3;
    color: #0085c8; 
    overflow:hidden;        
}

Upvotes: 0

Views: 251

Answers (1)

Jose Fuentes
Jose Fuentes

Reputation: 69

Change the CSS for .custom-select:after to match the following:

.custom-select:after {
background-color: #fff;
border-left: 1px solid #cacaca;    
content: "\25bc";
display: block;
font-size: 1em;
line-height: 1em;   
padding: 11px 13px 11px 11px;   
position: absolute;
right: 13px;    
text-align: center;
top: 3%;
width: 0;   
z-index: 2; 
box-sizing: inherit;
height:100%;

/* IE */
line-height: 3em\9;
padding: 0px 13px 0px 11px\9;
right: 0px\9;
width: 10px\9;
z-index: 1;

}

Upvotes: 1

Related Questions