CSS过渡不适用于输入宽度

问题描述

我希望输入框的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>

解决方法

您不能使用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>

,

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

.expand input[type = "text"],255);
    border-radius: 30px;
    background: none;
    transition: 0.25s;
    width: 100px;
}

.expand input[type = "text"]:hover,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>