Bug of Blur in input

Question

because my css when I add the following snippet of code into my input happens this:

#container-header{
    height: 50px;
    width: 100%;
    background: #252525;
    position: fixed;
    top:  100%;
    transform: translateY(-100%);
}

#container-header #container-header-search{
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

#container-header #container-header-search form input{
    padding: 8px;
    border: 1px solid white;
    background: none;
    color: white;
    outline: none;
    width: 500px;
    display: inline-block;
    width: 400px;
}

<header>
    <div id="container-header">
        <div id="container-header-search">
            <form>
                <input type="text" placeholder="Buscar">
                <button>Ok</button>
            </form>
        </div>
    </div>
</header>

is with that effect "Blur" very ugly