What's the CSS style for the glow effect around input boxes?

UX
1

What’s the CSS style for the glow effect around input boxes?

2

AFAIK it’s :focus

4 Likes
3

Probably some type of box-shadow. In Chrome, if you want to view the CSS, you can right click the element and click Inspect. If you click the :hov button, you get options for forcing state (e.g. :focus).

1 Like
4

How it’s applied varies a bit, because some are inputs and some are our select-kit dropdowns, but it’s a border and a box-shadow

input {
  &[type="text"],
  &[type="password"],
  &[type="datetime"],
  &[type="datetime-local"],
  &[type="date"],
  &[type="month"],
  &[type="time"],
  &[type="week"],
  &[type="number"],
  &[type="email"],
  &[type="url"],
  &[type="search"],
  &[type="tel"],
  &[type="color"] {
    &:focus {
      border-color: $tertiary;
      box-shadow: shadow("focus");
      outline: 0;
    }
  }
}
9 Likes