Question

Is there a way to use css or jquery to create a simple border around focused form field. I would like something similar to Groupon’s login page.

Answer 1

I checked the console in Chrome and they aren’t doing anything special to the input on focus. They aren’t changing the class or the inline style. Here’s the user agent style for input for webkit-based browsers:

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;
}

I hope this gives you an idea of how it works, but I think it’s just general behavior of the browser.