Question

我开发了一个带有css和jQuery的搜索表单，当我点击我的提交按钮时，输入框会展开。在谷歌Chrome中一切都很好..

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

我试图在我的#test中使用outline none来解决这个问题但是它没有工作......

有谁知道如何在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;
 }

按钮和仅在mozilla Firefox中输入边框红色

1 个答案: