输入:焦点不起作用

Question

我试着谷歌风格输入框.但我坚持输入:焦点.代码在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;

    }

任何见解将不胜感激!

Answer 1

使用input#gText:focus 而不是input[type="text"]:focus和添加outline: none;

输入#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;
大纲:无;
}

演示:http:
//jsfiddle.net/GmgUZ/1/