Although my code functions well in various browsers, I am experiencing an issue with IE. I have styled the select element, but I am unable to remove the default arrow in IE.
<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;
}
In Firefox, I was able to remove the arrow using the following code:
webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
Background image for select element: https://i.sstatic.net/UrZqa.png