button and input with border red only in mozilla firefox - html

Question

I developed a search form with css and jQuery for when i click in my submit button the input box expands.
In google chrome everything is work fine..
But in mozilla firefox When I click in the button to expand, the input expands with a border right and then when the input contracts the button stays with the red border in the left.
I´m trying to solve this with outline none in my #test but its not working...
Anyone there know How I can solve this in mozilla?
My html:
<li id="sb-search" style="float:right; list-style:none; height:20px;">
<div id="search-container">
<span id="search" class="form-container cf">
<form name="form1" >
<input id="test" type="search" placeholder="Search..." required="required" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
</li>
My css:
#test
{
font-family:'bariolthin';
font-size:17px;
line-height:18px;
outline:none;
border:0;
}
.form-container input
{
width: 150px;
height: 30px;
float: left;
font: bold 15px;
font-size:15px;
font-family:'bariol_lightlight';
border: 0;
background: #f3f3f3;
border-radius: 3px 0 0 3px;
color:#000;
margin-top:8px;
display:none;
outline:none;
}
.form-container button
{
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 30px;
width: 35px;
text-transform: uppercase;
background: #141d22;
border: 3px solid #141d22;
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
margin-top:8px;
outline:none;
border:none;
}
My jQuery:
$(function() {
$('button.expand').click(function(event) {
$('#test').width(0).addClass('visible').show().animate({width: 180}, 500);
event.stopPropagation();
});
$('#test').click(function(event) {
$('#test').width(180);
event.stopPropagation();
});
$('html').click(function() {
if($('#test').hasClass("visible")){
$('#test').width(180).show().animate({width: 0}, 500).removeClass("visible");
}
});
});

Answer 1

You have to reset box-shadow.
#test {
font-family:'bariolthin';
font-size:17px;
line-height:18px;
outline:none;
border:0;
box-shadow:none;
}