border around drop down list

Can i somehow remove this dashed border in drop down list. Every time i click on drop down list i get this dashed border. Exampl开发者_高级运维e 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>

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.

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!

You can disable such borders using the css outline property:

outline: none;