title: input:focus is not working
body: <p>i tried to google style input box . but i stucked at input:focus. 
  code is below 
  <a href="http://jsfiddle.net/GmgUZ/" rel="noreferrer">http://jsfiddle.net/GmgUZ/</a></p>
  
  <pre><code>  input:hover{
      border-bottom-color: #B9B9B9;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-left-color-ltr-source: physical;
      border-left-color-rtl-source: physical;
      border-left-color-value: #B9B9B9;
      border-left-style-ltr-source: physical;
      border-left-style-rtl-source: physical;
      border-left-style-value: solid;
      border-left-width-ltr-source: physical;
      border-left-width-rtl-source: physical;
      border-left-width-value: 1px;
      border-right-color-ltr-source: physical;
      border-right-color-rtl-source: physical;
      border-right-color-value: #B9B9B9;
      border-right-style-ltr-source: physical;
      border-right-style-rtl-source: physical;
      border-right-style-value: solid;
      border-right-width-ltr-source: physical;
      border-right-width-rtl-source: physical;
      border-right-width-value: 1px;
      border-top-color: #A0A0A0;
      border-top-style: solid;
      border-top-width: 1px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
      }
  
    input[type="text"]:focus {
    border:1px solid #4D90FE;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
  
      }
  </code></pre>
  
  <p>Any insight would be greatly appreciated!</p>