Question

i tried to google style input box . but i stucked at input:focus.
code is below
http://jsfiddle.net/GmgUZ/

  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;

    }

Any insight would be greatly appreciated!

Answer 1

Use input#gText:focus instead of input[type="text"]:focus and add outline: none;

input#gText: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;
outline: none;
}

demo:
http://jsfiddle.net/GmgUZ/1/