Question

我正在尝试用css制作一些美容搜索框。

在Chrome上，这样可以正常工作，但在FF上，搜索按钮被破坏了..

    <form class="form-wrapper cf" action="" method="post">
        <input type="search" placeholder="O que voce procura?" required>
        <button type="submit">BUSCAR</button>
    </form>

我的输入字段css：

    /* Form text input */
    .form-wrapper input {
        width: 230px;
        height: 30px;
        padding: 0px 10px 0px 30px;
        padding-top:5px\9;
        float: left;    
        font: 16px 'Maven Pro', Arial, Tahoma, serif;
        color:#959595;
        border: 0;
        background: #eee url(imagens/lupa.png) no-repeat;
        background-position:5px center;
        border-radius: 3px 0 0 3px;      
    }
    .form-wrapper input:focus {
        outline: 0;
        background: #fff url(imagens/lupa.png) no-repeat;
        background-position:5px center;
        /*box-shadow: 0 0 2px rgba(0,0,0,.8) inset;*/
    }

这是我的小提琴：http://jsfiddle.net/NeRFC/

在Chrome和Firefox上打开以查看问题

如何解决？

Answer 1

刚刚从.form-wrapper中移除了宽度，它似乎有效。

Answer 2

尝试将mozilla规则添加到.form-wrapper input：

-moz-border-radius: 3px 0 0 3px;

另外，尝试正确评论这些行：

在.form-wrapper输入中：

background: #eee url(imagens/lupa.png) no-repeat;

要

#background: eee url(imagens/lupa.png) no-repeat;

在.form-wrapper输入中：focus：

background: #fff url(imagens/lupa.png) no-repeat;

要

#background: fff url(imagens/lupa.png) no-repeat;

马克西姆

在Firefox上打破的搜索框

2 个答案: