button and input with border red only in mozilla firefox

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;
 }