Below is an HTML code snippet:
<div style="height:300px; width:300px; background:#000 ">
<div style="padding:30px">
<select id="keywordsearch" class="upperslect">
<option value="1">ABC</option>
<option value="2" >Def</option>
<option value="3" selected="selected">Select Box</option>
<option value="4">GGGG</option>
</select>
</div>
</div>
The corresponding CSS code is as follows:
.upperslect
{
font-family:Tahoma;
color:#6C6C6C;
border: none;
background:#FFFFFF;
font-family:Arial;
font-size:12px;
width:155px;
height:26px;
margin:0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I am encountering a strange output issue in both Chrome and Mozilla browsers. The images below illustrate the problem.
Image: Chrome Browser
Image: Mozilla Firefox Browser
If anyone knows how to resolve this issue, please provide guidance. Although the image in Chrome appears correct, attempts to adjust padding have caused the select box array to shift downward.
Additionally, I am attempting to add a background image to the Select box without success.