无法使CSS宽度过渡生效

吉尔赫姆·施耐德（Guilherme Schneider）

我无法找出如何使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>

还有一件事困扰着我，您可以在下图中看到：

图像有时显示的白色边框。

我怎样才能使一切正常？

rmpstmp

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

https://jsfiddle.net/qz3qj846/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。