无法使 CSS 宽度过渡工作

我无法找到如何使CSS宽度转换工作。嗯，它确实有效，但它只是从auto跳到100%，没有动画。

这是我的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%;
}

这是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>

还有一件事困扰着我，你可以在下面的图片中看到：

图像这就是有时显示的白色边界。

我怎样才能让一切正常工作？

您应该为非悬停选择器添加width规则。

https://jsfiddle.net/qz3qj846/

相关内容

最新更新

热门标签：