CSS transition does not work on input width

Question

I'd like to see an increasing or decreasing width for the input box, but I cannot get the transition to work. Does anybody know why it's not working?

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

What transition do you want exactly? The width IS changing on hover. — Debsmita Paul, Sep 01 '20 at 10:48
You can not transition from or to `auto` values. You did not specify any intial width for the input in its non-hover state, so its width _is_ `auto`. — CBroe, Sep 01 '20 at 10:49

score 3 · Accepted Answer · answered Sep 01 '20 at 10:49

You can't transition using width: auto (Which is the default as you have not specified a width), your element needs an initial width to be defined.

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

score 0 · Answer 2 · answered Sep 01 '20 at 10:54

You need set initial width of input

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

CSS transition does not work on input width

2 Answers2