-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

.form-wrapper入力にmozillaルールを追加してみてください：

-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 input：focus：

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

に

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

マキシム

于 2012-11-19T13:02:22.737 に答える