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: http://i.imgur.com/PSolPt7.png
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With