Passworteingabe css nicht wirksam

Question

Ich habe alle meine Eingaben mit den gleichen CSS-Stilen, aber meine Passworteingabe ist sehr klein im Vergleich zur Texteingabe.

Auf der JS Fiddle here, sieht alles gleich, es funktioniert gut. Das Größenproblem für die Kennworteingabe wird in Chrome, Firefox und IE sowohl in der Entwicklung als auch in der Produktion auf meinem Computer angezeigt.

css:

.log-form input[type="text"], 
.log-form input[type="date"], 
.log-form input[type="datetime"], 
.log-form input[type="email"], 
.log-form input[type="number"], 
.log-form input[type="password"] 
.log-form input[type="search"], 
.log-form input[type="time"], 
.log-form input[type="url"], 
.log-form textarea, 
.log-form select 
{ 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    -o-transition: all 0.30s ease-in-out; 
    outline: none; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 100%; 
    background: #fff; 
    margin-bottom: 6px; 
    border: 1px solid #ccc; 
    padding: 6px; 
    color: #555; 
    font: 95% Arial, Helvetica, sans-serif; 
} 

.log-form input[type="text"]:focus, 
.log-form input[type="date"]:focus, 
.log-form input[type="datetime"]:focus, 
.log-form input[type="email"]:focus, 
.log-form input[type="number"]:focus, 
.log-form input[type="password"]:focus, 
.log-form input[type="search"]:focus, 
.log-form input[type="time"]:focus, 
.log-form input[type="url"]:focus, 
.log-form textarea:focus, 
.log-form select:focus 
{ 
    box-shadow: 0 0 5px #43D1AF; 
    padding: 6px; 
    border: 1px solid #43D1AF; 
} 

Answer 1

Sie verfehlten , nach [password] und in HTML sind Sie nicht Ihre log-form Klasse.

fiddle link

.log-form input[type="text"], 
 
.log-form input[type="date"], 
 
.log-form input[type="datetime"], 
 
.log-form input[type="email"], 
 
.log-form input[type="number"], 
 
.log-form input[type="password"], 
 

 
/* Added , which missed */ 
 

 
.log-form input[type="search"], 
 
.log-form input[type="time"], 
 
.log-form input[type="url"], 
 
.log-form textarea, 
 
.log-form select { 
 
    -webkit-transition: all 0.30s ease-in-out; 
 
    -moz-transition: all 0.30s ease-in-out; 
 
    -ms-transition: all 0.30s ease-in-out; 
 
    -o-transition: all 0.30s ease-in-out; 
 
    outline: none; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    width: 100%; 
 
    background: #fff; 
 
    margin-bottom: 6px; 
 
    border: 1px solid #ccc; 
 
    padding: 6px; 
 
    color: #555; 
 
    font: 95% Arial, Helvetica, sans-serif; 
 
} 
 

 
.log-form input[type="text"]:focus, 
 
.log-form input[type="date"]:focus, 
 
.log-form input[type="datetime"]:focus, 
 
.log-form input[type="email"]:focus, 
 
.log-form input[type="number"]:focus, 
 
.log-form input[type="password"]:focus, 
 
.log-form input[type="search"]:focus, 
 
.log-form input[type="time"]:focus, 
 
.log-form input[type="url"]:focus, 
 
.log-form textarea:focus, 
 
.log-form select:focus { 
 
    box-shadow: 0 0 5px #43D1AF; 
 
    padding: 6px; 
 
    border: 1px solid #43D1AF; 
 
}

<div class="log-form"> 
 
    <!-- Added log-form --> 
 
    <input type="text" name="text" placeholder="name"><br /><br /> 
 
    <input type="password" name="pwd" placeholder="password"> 
 
</div>

Answer 2

Bitte fügen , nach [type="password"] in dem folgenden Selektor chunk:

.log-form input[type="password"] .log-form input[type="search"], 

Answer 3

bearbeiten HTML

<input type="password" class="passw" name="password" plcaeholder="what ever you want"> 


    <style> 
    .passw { 
    #what ever you want! 
    } 

</style> 

Answer 4

Nach [type = password] scheint ein Komma zu fehlen.