仅在 Mozilla Firefox 中带有红色边框的按钮和输入

Question

我使用 css 和 jQuery 开发了一个搜索表单，当我单击提交按钮时，输入框会展开。 在谷歌浏览器中一切正常..

但是在 mozilla firefox 中，当我单击按钮展开时，输入会以右边框展开，然后当输入收缩时，按钮会在左侧保持红色边框。

我正在尝试在我的#test 中使用无大纲来解决此问题，但它不起作用...

那里的人知道我如何在 Mozilla 中解决这个问题？

我的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>

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

我的 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

你必须重置 box-shadow。

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