CODEWITHSUNDEEP
htmlcss
Adam McGurk
Adam McGurk

Reputation: 476

CSS3 transition not affecting width

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;

Upvotes: 2

Views: 117

Answers (2)

Ehsan
Ehsan

Reputation: 12969

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>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

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>

Upvotes: 1

Related Questions