css 样式问题 样式设置input

Question

<input type="password" name="password" />
把input 的边框去掉： input{border：none； borde-botton： border-bottom:1px solid #999;}
就设置成了只有一条底线的input框，如图

现在遇到一个问题，当要在input框输入文字时，这条线不会出现颜色，也就是说鼠标获取焦点后没有提示，做不到图二一样的效果

现在通过CSSde 话要怎么样能得到图二的效果，样式用了很多种方式都没有效果，请大神们帮帮忙

Answer 1

input{
        border: none;
        outline: none;
        border-bottom: 1px solid #999;
     }
     input:focus{
        outline: none;
        border-bottom: 2px solid blue;
     }

这样就可以了 任何浏览器都没问题

Answer 2

input:focus
{
border-bottom:1px solid blue;
}

Answer 3

input{

    border: none;
    outline: none;
    border-bottom: 1px solid #999;
 }
 input:focus,
 input:active{
    outline: none;
    border-bottom: 2px solid blue;
 }

Answer 4

input{

border-bottom:1px solid #000;

}
input:focus{

border-bottom:2px solid #00f;

}