I’m trying to make some beauty search box with css. On chrome, this works

Question

0

Editorial Team

Asked: June 14, 20262026-06-14T13:08:13+00:00 2026-06-14T13:08:13+00:00

I’m trying to make some beauty search box with css. On chrome, this works

0

I’m trying to make some beauty search box with css.

On chrome, this works fine, but on FF the search button is broken..

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

my input field 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;*/
    }

here is my fiddle: http://jsfiddle.net/NeRFC/

Open on Chrome and on Firefox to see the problem

How to fix it?