Hello all,

 

Does anyone know how to stop that annoying outline on <select> elements in FF? outline:none; wont apply to these.

 

there must be a way though! CSS or Javascript method would be great if anyone has any out there...

Maybe -moz-outline ?

Nope that doesnt work mate. Im guessing its just one of those we have to live with...

If you could give more infomation on the code that you are trying to use then it maybe possible to help and have a go at it.

 

But you might have to set the border to 0px.

Hello all,

 

Does anyone know how to stop that annoying outline on <select> elements in FF? outline:none; wont apply to these.

 

there must be a way though! CSS or Javascript method would be great if anyone has any out there...

 

the best i got is really hack-ish and only really removes focus once an item is selected. i'll see if i can find something better. i'm pretty new with javascript, but i have a friend that might be able to solve this for you. i'll let you know if i find a better solution.

 

<script type="text/javascript">

function loseFocus()

{

document.getElementById('select1').blur()

}

</script>

 

<form>

<select id="select1">

<option onclick="loseFocus()" value="Lose focus" >Option 1</option>

<option onclick="loseFocus()" value="Lose focus" >Option 2</option>

<option onclick="loseFocus()" value="Lose focus" >Option 3</option>

<option onclick="loseFocus()" value="Lose focus" >Option 4</option>

</select>

</form>

If you could give more infomation on the code that you are trying to use then it maybe possible to help and have a go at it.

 

But you might have to set the border to 0px.

 

Hi mate,

 

Thanks helping with this issue. Im not really sure why you need to see code I use but it just a plain old form select:

 

<select id="Email">
<option value="test@firstscottish.com">test@firstscottish.com</option>
<option value="test@firstscottish.com">test@firstscottish.com</option>
<option value="test@firstscottish.com">test@firstscottish.com</option>
</select>

 

CSS:

 

select {
border:1px solid #AAADAF;
clear:right;
float:right;
margin:0pt 0pt 10px;
outline:none;
padding:3px;
}

 

Will try the javascript solution below though and see if that works!