How to style this drop-down box

[Chrisj]

How can I style this drop-down list/box in IE, so it looks the same as how I have it in Chrome?

(see attached images)

 

Here's the current code:

<form method="get" action="../search.php" name="myForm" />
<select size="1" name="type" class="dropdown_box" />
<option value="1">CHANNEL 1</option>
<option value="2">CHANNEL 2</option>
<option value="any string here">ALL CHANNELS</option>
</select>
<input autocomplete="off" id="keyword" name="keyword" value="Enter text" onfocus="if (this.value=='Enter text') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />
<input type="submit" value="VIEW"/>
</form>

/*input,select.dropdown_box {*/
input.common-input, select.dropdown_box {
width:100px;
height: 40px;
color:#cccccc;
border:1px solid #cccccc;
background: #ffffff;
}

input:focus,select:focus{background:#ffffff}

Any help will be appreciated.

[WebOutGateway]

Hi, Chrisj!

 

 I think it's a matter of browser compatibility so you cannot style the dropdown in IE as same as with Chrome.

In other words, it is the default view. What you can do is modify the entire dropdown box.

 

I hope this helps. Thank you.

[jeffreyappel]

I can see you didn't use webkit and need more styling on 'select'.

 

cheer

[BuildMyWeb]

you cannot style some aspects of a drop-down directly.  but there are workarounds that work quite well:

 

http://bavotasan.com/2011/style-select-box-using-only-css/