如何创建类似于Groupon登录的表单字段突出显示

Question

有没有办法使用css或jquery在聚焦的表单字段周围创建一个简单的边框。我想要类似Groupon's login page。

Answer 1

我在Chrome中检查了控制台，他们没有对focus上的输入做任何特殊处理。他们不改变班级或内联风格。下面是基于WebKit的浏览器输入用户代理样式：

input, input[type="password"], input[type="search"], isindex { 
    -webkit-appearance: textfield; 
    padding: 1px; 
    background-color: white; 
    border: 2px inset; 
    -webkit-rtl-ordering: logical; 
    -webkit-user-select: text; 
    cursor: auto; 
} 

input, textarea, keygen, select, button, isindex, datagrid { 
    margin: 0em; 
    font: -webkit-small-control; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    line-height: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: -webkit-auto; 
} 

我希望这给你它是如何工作的想法，但我认为这是浏览器的只是一般的行为。