html - 密码输入是唯一不会在选择时突出显示的字段

Question

出于某种原因，当我单击密码字段时，密码字段不会突出显示，同时其他字段在选择时突出显示。

My code is exactyly the same for all fields, but the password field reacts differently. I know the answer must be something simple, so please let me know what I'm missing.

http://jsfiddle.net/bbm1ommt/

<div id="Personal"  class="formDiv">

            <!-- Register Form -->

            <div class="user_signup" id="user_register1">

        <form class="signup-form">


          <input class="fullname" type="text" name="fullname"  placeholder="First and Last Name" />

          <input class="email" type="email" name="email" placeholder="Email address"/>

          <input class="pass" name="pass" type="password" placeholder="New password" />



            <div class="btnwrapper2">

            <input class="signupbtn" value="Sign up!" type="submit"/> 

          </div>

         </div>

        </form>

            </div>

CSS:

.user_signup {display: block;}
.user_signup label {display: block; margin-bottom:5px; color:#666;}
.user_signup input[type="text"], .user_signup input[type="password"], .user_signup input[type="email"] {display: block; width:100%; padding:15px; border-radius:5px; border:1.2px solid #DDD; font-size:20px; color:#333; font-family:arial; margin-bottom:20px; box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
}}

.user_signup input[type="password"]:focus { 
    outline: none;
    border-color:#39F;
   }

.user_signup input[type="text"]:focus { 
    outline: none;
    border-color: #39F;
   }

.user_signup input[type="email"]:focus { 
    outline: none;
    border-color: #39F;
   }


   .signupcheckbox {margin-top:10px; margin-bottom:40px; margin-left:4px;}




.signupbtn { background:gray; display:block; width:100%; padding:20px; margin:0px 0; font-size:20px; margin-top:15px; border-radius:5px; box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; color:#FFF; text-align:center; text-decoration:none;background:gray; cursor:pointer; outline:none !important;
    -webkit-appearance:none; border:none;} 


.signupbtn:hover {background:blue; color:white;}



.btnwrapper2 {display:inline-block; width:100%; height:auto; position:relative; clear:both; margin-top:0px; margin-right:10px;
}


.signuptitle {font-size:40px; margin-bottom:15px; }

.loginline{text-align:left; float:left; display:inline-block; margin-left:7px; margin-top:15px; color:#A1A1A1; border-top:1px solid #DDD; width:100%;}

.loginline a {text-decoration:none; color:#39F; }

.loginline a:hover {text-decoration:underline; color:#39F; }


.signup-form {text-align:left; float:left; display:inline-block;  }

.signup-form  p {float:left; margin-bottom:15px; font-size:20px; clear:both;}


.dropdownform {text-align:left; display:inline-block; margin-bottom:20px; clear:both;}

.dropdownform select {text-decoration:none; color:#333; font-size:20px; }

.dropdowntext{font-size:20px;  }


.form-group { border: 1px solid red;}




.logintext {float:left; cursor: pointer; color:#39F; font-size:20px; text-decoration:none;  margin-top:10px; margin-left:4px;}

.logintext:hover {text-decoration:underline;}

Answer 1

不是真正的答案，但当我添加时: .user_signup 输入 [type="password"]:active { 边框颜色:#39F； }有用。 (点击边框出现直到点击释放)CSS 是简单奇迹的殿堂。我会继续看一段时间，因为大约一年前我遇到过类似的事情。会回来的 - 希望很快。

---

使用解决方案编辑 (2.0)

我不知道为什么 firefox 不能处理你做的方式，但这里有一个适用于所有浏览器的解决方案:

http://jsfiddle.net/eeu9nhxh/2/

关键部分是:

.user_signup input:focus { 
    outline: none;
    border-color: #39F!important;
   }

它正在为您的所有输入提供这种焦点样式。

希望对你有帮助，

安德鲁