Can't make CSS width transition work

问题

I couldn't manage to find out how to make the CSS width transition work. Well, it actually work, but it just jump from auto to 100% with no animation.

Here's my CSS:

div#searchbar {
    padding: 10px;
    background-color: #404040;
}

.searchbar input {
    box-sizing: border-box;
    padding: 10px;
    font-family: Open Sans;
    font-size: 16px;
    color: #404040;
    outline: none;
    background-color: #909090;
    padding-left: 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.searchbar input:hover {
    width: 100%;
}

Here's the HTML:

<html>
    <head>
        <title>
            Test
        </title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="styles/global.css" />
        <meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scalabe=0" />
        <script src="scripts/jquery-1.12.2.js"></script>
    </head>

    <body>
        <div class="searchbar">
            <form name="Search">
                <input type="text" name="Search" value="Pesquisar...">
            </form>
        </div>
    </body>          
</html>

There's also one thing bothering me, you can see in the image below:

image Which is the white border that shows sometimes.

How can I make everything work?