Question

我的Codepen：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规范中有记载。

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

1 个答案: