اثر نکردن outline

[e_a_23]

سلام دوستان

من یک drop down list ایجاد کردم و بهش استایل دادم. در قسمت option ، هنگامی که outline:none قرار میدم اثر نمیکنه.کسی میتونه کمک کنه؟


<div class="language">
<select name="lang">
<option value="farsi" selected="selected">فارسی</option>
<option value="english">انگلیسی</option>
<option value="german">آلمانی</option>
</select>
</div>

و در css:

.language
{
overflow: hidden;
width: 123px;
height: 22px;
background: white;
float: right;
position: relative;
top: 6px;
right: 70px;
border: solid 1px #ccc;
color: #111;
outline: none;
margin: 0;
}
.language:after
{
content: '';
background: url("../Images/select_down.gif") no-repeat right;
width: 26px;
height: 22px;
display: block;
position: absolute;
top: 0;
right: 0;
pointer-events: none;
}

.language select
{
-webkit-appearance: none;
background: transparent;
width: 123px;
height: 22px;
cursor: pointer;
font-size: 12px;
border: none;
color: #999;
font: 12px tahoma;
text-align: justify;
color: #999;
padding-right: 10px;
position: absolute;
padding-left: 46px;
}


.language option
{
padding-right: 35px;
text-align: right;
display: block;
height: 20px;
border: solid 1px #ccc;
border-top: none;
border-bottom: none;
overflow: hidden;
outline: none;
}

همچنین در زمانی که ماوس را روی option ها میبریم، میخوام رنگ بک گراند option مشکی بشه.اما نمیدونم چه جوری hover رو اعمال کنم.خیلی ممنون میشم اگر کسی جواب بده.

[qartalonline]

لینک زیر نمونه ای از سفارشی کردن تگ select میباشد.
http://barnamenevis.org/showthread.php?404152-select-option-%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C