border around drop down list - html

Question

Can i somehow remove this dashed border in drop down list. Every time i click on drop down list i get this dashed border. Example is in image.
edit:
css:
option {
height: 20px;
padding: 7px 0 5px 3px;
outline: none;
border: none;
}
html:
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Razvrsti restavracije po</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
</select>

Answer 1

I think the border is used by some people who prefer to navigate using their keyboard. So it might not be a good idea to remove it.

Answer 2

I don't think it is possible with CSS. What is known is that dashed border has the same color as text, so if you set the text-color same as your background it will "disappear" but your text will too:
Maybe you can play with some javascript:
onmouseover="this.style.color='#DFF1FA'" onmouseout="this.style.color='#000000'"
Or add this at your onchange att: this.blur()
<select onchange="window.open(this.options[this.selectedIndex].value,'_top'); this.blur()">
<option value="" style="color:black">Razvrsti restavracije po</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
<option value="#">Odrto test</option>
</select>
With it the dashed outline will disappear after choosing an option.
You can do even more...
JavaScript rulez!

Answer 3

You can disable such borders using the css outline property:
outline: none;