如何在选择时设置输入的边框颜色？

Question

我的 Codepen：http://codepen.io/leongaban/pen/BeErL

我发现了这个问题，而回答者说选择已被弃用/删除？ Changing border-color on selection

无论如何，我试图在选择时将边框/轮廓大小保持为 2 像素。 However when the input field is selected the 2px border goes away (or maybe border or outline goes away?)

我还想确保在选择输入时边框颜色变为较暗的#b5b5b5。

HTML

<div id="login-form">

  <input type="username" id="login-username" name="username" value="username">
  <input type="password" id="login-password" name="password" value="password">

  <a href="#">Forgot your password?</a>

  <button type="button">login</button>

</div>

CSS

input {
  margin: 0 40px;
  padding-left: 20px;
  width: 300px;
  height: 42px;
  font-size: 1.250em;
  color: #b1b3b3;
  border: 2px solid #e8e8e8;
  outline: 1px solid #e8e8e8;
  margin-bottom: 15px;
}

input::selection {
  /* Safari */
  outline: 2px solid #b5b5b5;
  border: 2px solid #b5b5b5;
}
input::-moz-selection {
  /* Firefox */
  outline: 2px solid #b5b5b5;
  border: 2px solid #b5b5b5;
}

button {
  margin: 0 35px 20px 0;
  padding: 10px 20px;
  font-size: 1.125em;
  color: white;
  border: none;
  text-shadow: 0 -1px 0 $orange_color, 15%;
  background: $orange_color;
  cursor: pointer;
}

button:hover {
  text-shadow: 0 -1px 0 darken($orange_color, 15%);
  background: lighten($orange_color, 5%);
} 

Answer 1

您需要使用input:focus 而不是input::selection。

这在CSS2 Selectors 规范中有记录。