密码输入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

[type = password]后似乎缺少逗号。