CODEWITHSUNDEEP
htmlcssselectdropdownbox
axel
axel

Reputation: 4127

Select appearence not working properly in Firefox (29) and Internet Explorer (11)

a question about a drop-down select, which looks not totally correct in its appearance, the default part on the right should not be visible with this code, but it is shown. this is the code, created inside a site developed with bootstrap for mobile template. do i miss something? do you need more information?

.menuSelect {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    height: 75px;
    font-size: 30px;
    width: 100%;
    border: none;
    padding: 0 10px;
    background: url("img/selectmenu-arrowwhite.png") no-repeat scroll right center #00AEEF;
    color: #FFFFFF;
}

enter image description here

thanks in advance

Upvotes: 0

Views: 263

Answers (1)

bkardol
bkardol

Reputation: 1268

A combination of low indent and text-overflow: '' works on FireFox. I did use it recently as well.

http://jsfiddle.net/Jg2nF/3/

.menuSelect {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    height: 75px;
    font-size: 30px;
    width: 100%;
    border: none;
    padding: 0 10px;
    background: url("img/selectmenu-arrowwhite.png") no-repeat scroll right center #00AEEF;
    color: #FFFFFF;
}

I forgot IE, sorry. I'm using this currently:

http://jsfiddle.net/Jg2nF/4/

select::-ms-expand {
    display: none;
}

Upvotes: 1

Related Questions