CSS过渡不适用于表单中的输入元素

RaPiDfire69

我正在尝试在输入元素上应用过渡，但此处无法正常工作：

我不知道我要去哪里错了。输入元素似乎不受过渡标记的影响。

.mainForm {
  border-radius: 50px;
  border: springgreen 5px solid;
  width: 50%;
  padding: 50px;
  margin-top: 50px;
  background-color: rgba(150, 255, 150, 0.5);
}

input {
  border: rgba(50, 51, 52, 0.5) solid 5px;
  border-radius: 50px;
  font-size: 20px;
  outline: none;
  padding: 10px 25px;
  transition: width .35s ease-in-out;
}

input:focus {
  width: 75%;
}

button {
  border-radius: 50px;
  padding: 10px;
  border: rgba(50, 51, 52, 0.5) solid 5px;
  transition: width .35s ease-in-out;
}

button:hover {
  background-color: rgba(50, 51, 52, 0.25)
}

<center style="margin-top: 50px;">
  <h1 style="display:inline;font-family:courier;">
    <span style="font-family:fantasy;">
                Google
                </span> Search Replica</h1>
  <form method="get" action="https://google.com/search" autocomplete="off" class="mainForm">
    <input name="q" placeholder="Search...">
    <button type="submit"><img src="https://image.flaticon.com/icons/png/512/54/54481.png" width="20px"></button>
  </form>
</center>

约翰尼斯

您还需要width为正常（非悬停）状态定义一个，以使过渡正常工作（对于应受过渡影响的所有属性-它需要在两个已定义状态之间进行过渡）：

<!DOCTYPE html>
<html>
    <head>
        <title>Project003 || Google search replica</title>
        <style type="text/css">
            .mainForm{border-radius:50px; border:springgreen 5px solid;width:50%; padding:50px;margin-top: 50px; background-color:rgba(150,255,150,0.5);}
            input{width:25%; border:rgba(50,51,52,0.5) solid 5px;border-radius:50px;font-size:20px;outline:none;padding:10px 25px;transition: width .35s ease-in-out;}
            input:focus{width:75%;}
            button{border-radius:50px;padding:10px;border:rgba(50,51,52,0.5) solid 5px;transition: width .35s ease-in-out;}
            button:hover{background-color:rgba(50,51,52,0.25)}
        </style>
    </head>
    <body>
        <center style="margin-top: 50px;">
            <h1 style="display:inline;font-family:courier;">
                <span style="font-family:fantasy;">
                Google
                </span>
                Search Replica</h1>
            <form method="get" action="https://google.com/search" autocomplete="off" class="mainForm">
                <input name="q" placeholder="Search...">
                <button type="submit"><img src="https://image.flaticon.com/icons/png/512/54/54481.png" width="20px"></button>
            </form>
        </center>
    </body>
</html>

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

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