<!DOCTYPE html>
<html>
<head>
<title>Mac look select element</title>
<style>
select { display: block;}
div{
border:1px solid #bbb;width:200px; border-radius:6px;
-webkit-box-shadow:1px 1px 2px #bbb inset, 1px 1px 3px #ddd;
-khtml-box-shadow:1px 1px 2px #bbb inset, 1px 1px 3px #ddd;
box-shadow:1px 1px 2px #bbb inset, 1px 1px 3px #ddd;
background:rgb(249,249,249) url(sprite1.png) no-repeat right center;
overflow:hidden;
}
#dropdown {
width:217px;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding: 0px 0px 0px 4px;
border: none;
font:bold 12px Arial, Helvetica, sans-serif;
color:rgb(80,80,80);
background:transparent;
}
</style>
this style use for less than IE8(IE7,IE6,IE5)
<!--[if lt IE 8]><style>
select { display: block; overflow:none;border:1px solid red;}
div{
border:none;width:200px; border-radius:6px;
box-shadow:1px 1px 2px #bbb inset, 1px 1px 3px #ddd!important;
background:none;
background-image:none;
overflow:none;
}
#dropdown {
width:150px;
border:auto;
outline:auto;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding: 0px 0px 0px 0px;
font:bold 12px Arial, Helvetica, sans-serif;
color:rgb(80,80,80);
background:transparent;
border:1px solid red;
background:#ddd;
display:compact;
}
</style>
<![endif]-->
</head>
<body>
<form>
<div>
<select id="dropdown" name="dropdown">
<option selected="selected">Select</option>
<option">None Select</option>
<option>Must Select</option>
</select>
</div>
</form>
</body>
</html>
Image use in it
In this I have to replace the right side arrow of dropdown(select) element of form wirhout using of any scripting
Output
