CSS转换不适用于输入宽度

Question

我希望看到输入框的width增加或减少，但我无法使transition工作。有人知道为什么它不起作用吗？

.expand input[type = "text"], 
.expand input[type = "password"]{
border: 2px solid rgb(0, 119, 255);
border-radius: 30px;
background: none;
transition: 0.25s;
}
.expand input[type = "text"]:hover,
.expand input[type = "password"]:hover{
width: 210px;
border-color: rgb(47, 255, 57);
}

<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>

Answer 1

您不能使用width: auto进行转换(这是默认值，因为您没有指定宽度(，您的元素需要定义初始宽度。

.expand input[type = "text"], 
.expand input[type = "password"]{
border: 2px solid rgb(0, 119, 255);
border-radius: 30px;
background: none;
transition: 0.25s;
width: 100px; /* New CSS */
}
.expand input[type = "text"]:hover,
.expand input[type = "password"]:hover{
width: 210px;
border-color: rgb(47, 255, 57);
}

<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>

Answer 2

您需要设置输入的初始宽度

.expand input[type = "text"], 
.expand input[type = "password"]{
border: 2px solid rgb(0, 119, 255);
border-radius: 30px;
background: none;
transition: 0.25s;
width: 100px;
}
.expand input[type = "text"]:hover,
.expand input[type = "password"]:hover{
width: 210px;
border-color: rgb(47, 255, 57);
}

<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>