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