-1

我正在尝试用 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 上打开以查看问题

如何解决？

4

2 回答 2

1

刚刚从 .form-wrapper 中删除了宽度，它似乎可以工作。

于 2012-11-19T12:58:59.293 回答
0

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

-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 中输入：焦点：

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

到

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

马克西姆

于 2012-11-19T13:02:22.737 回答