How to style an input's border color on selection?

Question

My Codepen: http://codepen.io/leongaban/pen/BeErL

I found this question and the answerer is saying that selection was deprecated / removed? Changing border-color on selection

Anyways I'm trying to get keep the border/outline size to 2 pixels on selection. However when the input field is selected the 2px border goes away (or maybe border or outline goes away?)

Also I want to make sure that when the input is selected the border color changes to the darker #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

You need to use input:focus instead of input::selection .

This is documented in the CSS2 Selectors specification.