CSS 转换不适用于表单中的输入元素

Question

我正在尝试在输入元素上应用过渡，但这里有些东西不起作用：

我不知道我哪里错了。输入元素似乎不受转换标签的影响。

.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>

Answer 1

您还需要为正常（非悬停）状态定义一个 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>

CSS 转换不适用于表单中的输入元素

CSS transition not working on input element in a form

html

css

css-transitions