0

私のコードペン: http://codepen.io/leongaban/pen/BeErL

この質問を見つけましたが、回答者は選択が非推奨/削除されたと言っていますか? 選択時の境界線の色の変更

とにかく、選択時に境界線/アウトラインのサイズを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%);
}
4

1 に答える 1

2

input:focusの代わりに使用する必要がありますinput::selection。

これは、CSS2 セレクター仕様に記載されています。

于 2013-06-06T22:39:32.007 に答える