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

**URL:** https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702
**Category:** UX
**Created:** [April 7, 2019, 10:12pm UTC](https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702 "2019-04-07T22:12:45Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [April 7, 2019, 10:12pm UTC](https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702/1 "2019-04-07T22:12:45Z")

</div>

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

> **[Gyazo Screen Video](https://gyazo.com/b38ebf262bbc089402349c64b2d70b8a)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

> **[Gyazo Screen Video](https://gyazo.com/14767c25fc1c1467886c713b9b231cfb)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [April 7, 2019, 10:34pm UTC](https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702/2 "2019-04-07T22:34:13Z")

</div>

AFAIK it’s [:focus](https://css-tricks.com/almanac/properties/o/outline/)

---

<div class="post-metadata">

### Author: ![lionel-rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lionel-rowe/32/134288_2.png) [@lionel-rowe](https://meta.discourse.org/u/lionel-rowe)
#### Post date: [April 8, 2019, 1:53am UTC](https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702/3 "2019-04-08T01:53:40Z")

</div>

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`).

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 8, 2019, 2:27pm UTC](https://meta.discourse.org/t/whats-the-css-style-for-the-glow-effect-around-input-boxes/113702/4 "2019-04-08T14:27:45Z")

</div>

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

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

```