密碼輸入css沒有生效

Question

我的所有輸入都使用相同的css樣式，但與文本輸入相比，我的密碼輸入非常小。

在JS Fiddle here，一切看起來是一樣的，它工作得很好。 Chrome，Firefox和IE都會在我的機器上進行開發和生產時出現密碼輸入大小問題。

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

您[password]後錯過了,和HTML你不使用你的log-form類。

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

請在下面選擇塊[type="password"]之後添加,：

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

Answer 3

編輯HTML到

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


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

</style> 

Answer 4

[type = password]後面似乎有一個逗號丟失。