CSS3 transition not affecting width

Question

So I'm working with a login form trying to get the two input fields to expand with a CSS3 transition. I'm able to get it to expand just fine using a :focus selector, but I can't get it to transition. I can get the color to transition, but not the size. This is the code where I'm at right now: There is no inline CSS.

                .loginForm input[type=text],
                .loginForm input[type=password] {
                    line-height: 100%;
                    margin: 10px 0;
                    padding: 6px 15px;
                    font-size: 12px;
                    font-weight: bold;
                    border-radius: 26px;
                    transition: background-color 0.3s;
                    transition: width 1s;
                }
                    .loginForm input[type=text]:focus,
                    .loginForm input[type=password]:focus {
                        background-color: #FAEBD7;
                        width: 100%;
                    }

I have also tried this:

transition: all 1s ease-in-out;

and this:

transition: width 1s ease-in-out;

You can't transition from `auto` - define an initial `width` — Michael Coker, Jun 30 '17 at 22:17
CSS Transition requires starting point, so you have to add width:0px or 50% or .... somewhere in `.loginForm input[type=text], .loginForm input[type=password] { ` — Fered, Jun 30 '17 at 22:17
@MichaelCoker Thank you! I defined it as `width: 65%` and it works! Wish I could give you the answer credit! — Adam McGurk, Jun 30 '17 at 22:22
@AdamMcGurk cool, I'll submit an answer. I was looking to see if this was a dupe but couldn't find one. This is close, but it isn't the same https://stackoverflow.com/questions/38706515/width-transition-of-text-with-css-not-working — Michael Coker, Jun 30 '17 at 22:25

Ehsan · Answer 1 · 2017-06-30T22:33:52.987

you must define width for inputs:

.loginForm input[type=text], .loginForm input[type=password] {
   width: 150px;
  //more code;
}

use transition width & background-color in one line :

transition: width 1s, background-color 0.3s;

Full Code :

.loginForm input[type=text], .loginForm input[type=password] {
  line-height: 100%;
  margin: 10px 0;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 26px;
  width: 150px;
  transition: width 1s, background-color 0.3s;
}

.loginForm input[type=text]:focus, .loginForm input[type=password]:focus {
  background-color: #FAEBD7;
   width: 90%;
}

<form class="loginForm">
  <input type="text" name=""><br>
  <input type="password" name="">
</form>

score 1 · Accepted Answer · answered Jun 30 '17 at 22:28

You can't transition from an auto value. If you want to transition to a specific width, you need to set an initial width.

Also your background-image transition won't work because it's being overwritten by the one that follows it. To use multiple transitions on an element, separate them with commas.

* {
  margin:0;padding:0;box-sizing:border-box;
}
.loginForm input[type=text],
.loginForm input[type=password] {
  line-height: 100%;
  margin: 10px 0;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 26px;
  transition: width 1s, background-color 0.3s;
  width: 65%;
}

.loginForm input[type=text]:focus,
.loginForm input[type=password]:focus {
  background-color: #FAEBD7;
  width: 100%;
}

<div class="loginForm">
  <input type="text">
  <input type="password">
</div>

Thanks dude! And thanks also for pointing out the double transition which cancels out the color! — Adam McGurk, Jun 30 '17 at 22:33

CSS3 transition not affecting width

2 Answers2