CODEWITHSUNDEEP
htmlcssformsselect
Yamona
Yamona

Reputation: 1130

Select removing dropdown arrow - Cross-browser

My code works well in all browsers except IE. I styled the select but not able to remove the default arrow in IE. Simple code: HTML

<form>
<label for="selectitem">Food Favorites</label>
<select id="selectitem">
    <option>Choose...</option>
    <option value="italian">Italian</option>
    <option value="japanese">Japanese</option>
    <option value="mexican">Mexican</option>
    <option value="vietnamese">Vietnamese</option>
</select>
</form>

CSS code:

form {
    position: relative;
    top: 50px;          
}

form * {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    behavior: url(PIE.htc);
}

select, option {
    border: none;
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
    body {
    background: #666;
}

form {
    position: relative;
    width: 340px;
    margin: 0 auto;
    font-weight: bold;
    color: #DDD;
}

select {
    background: #555;
    border-radius: 4px;
    width: 240px;
    height: 35px;
    background: url('select.png') no-repeat;
    color: #DDD;
    padding: 8px;
    outline: solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';

}

select:focus {
    background: url('select.png') no-repeat 0 -35px;
}

option {
    background: #666;
    color: #DDD;
    padding: 5px;
    text-align: center;
}

I managed to remove the arrow in Firefox with 

webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';

Image of background for select: https://i.sstatic.net/UrZqa.png

Upvotes: 4

Views: 25397

Answers (2)

mundanelunacy
mundanelunacy

Reputation: 85

I had success using jquery-selectBox

The style your select box customize the included css file. Specifically to remove the arrow, modify .select-arrow so that it has display:none

Mine looks as follows:

.selectBox-dropdown .selectBox-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    height: 100%;
    background: url(jquery.selectBox-arrow.gif) 50% center no-repeat;
    border-left: solid 1px #BBB;
    display: none;
}

Upvotes: -2

Yamona
Yamona

Reputation: 1130

Here is the answer to my question :) For Firefox use

select {

    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

For IE use

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

Which -ms-expand is the arrow for Microsoft IE

Upvotes: 17

Related Questions