CSS3-Übergang wirkt sich nicht auf die Breite

Question

Also arbeite ich mit einem Login-Formular versuchen, die beiden input Felder mit einem CSS3 Übergang zu erweitern. Ich bin in der Lage, es mit einem :focus Selektor gut zu erweitern, aber ich kann es nicht zum Übergang bekommen. Ich kann die Farbe zum Übergang bringen, aber nicht die Größe. Dies ist der Code, wo ich gerade bin: Es gibt keine 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%; 
        } 

Ich habe auch versucht, dies:

transition: all 1s ease-in-out; 

und diese:

transition: width 1s ease-in-out; 

Answer 1

Sie können nicht transition von einem auto Wert. Wenn Sie transition zu einem bestimmten width möchten, müssen Sie eine erste width festlegen.

Auch Ihr background-imagetransition wird nicht funktionieren, weil es von dem folgenden überschrieben wird. Um mehrere transition s für ein Element zu verwenden, trennen Sie sie durch Kommas.

* { 
 
    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>

Answer 2

Sie width für Eingänge definieren müssen:

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

Verwendung Übergang width & background-color in einer Zeile:

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

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