Question

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

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

image 哪个是有时显示的白色边框。

我怎样才能让一切顺利？

Answer 1

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

https://jsfiddle.net/qz3qj846/

无法使CSS宽度转换工作

1 个答案: