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

Question

我的代码笔:http://codepen.io/leongaban/pen/BeErL

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

无论如何，我都在努力使选择时的边框/轮廓大小保持在 2 像素。但是，当选择输入字段时，2px 边框消失(或者边框或轮廓消失？)

此外，我想确保当输入被选中时，边框颜色会变为较暗的#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 中规范。