# CSS: “pointer-events”: “normal” is not a “pointer-events” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-pointer-events-normal-is-not-a-pointer-events-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `pointer-events` CSS property controls whether an element can be the target of pointer events such as clicks, taps, and hover states. Unlike many other CSS properties that accept `normal` as a keyword (e.g., `white-space`, `letter-spacing`), the `pointer-events` property does not include `normal` in its list of valid values. This is a common mistake since `normal` and `auto` are often used interchangeably across different CSS properties, but each property defines its own set of accepted keywords.

Using an invalid value like `normal` means the browser will ignore the entire declaration. In most cases this won't cause visible breakage because the default behavior already allows pointer interaction, but it can lead to unexpected results if you're relying on the property to override an inherited `pointer-events: none` from a parent element. The invalid declaration would simply be discarded, and the inherited `none` value would remain in effect, making the element unclickable.

For standard HTML elements, the two primary values you'll use are:

- **`auto`** — The element behaves as it normally would regarding pointer events. This is the default.
- **`none`** — The element is never the target of pointer events. Clicks and hovers pass through to whatever is behind it.

Several additional values exist (`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`) but these only apply to SVG elements. Global CSS keywords like `inherit`, `initial`, `unset`, and `revert` are also valid.

To fix the issue, replace `normal` with `auto` wherever it appears as a `pointer-events` value. If you're using `pointer-events: normal` to restore default interactivity after a parent set `pointer-events: none`, then `auto` is exactly what you need.

## Examples

### Incorrect — using `normal`

```html
<div style="pointer-events: normal;">
  <a href="/about">About us</a>
</div>
```

The validator will flag `normal` as an invalid value for `pointer-events`.

### Correct — using `auto`

```html
<div style="pointer-events: auto;">
  <a href="/about">About us</a>
</div>
```

### Practical use case: restoring pointer events on a child

A common pattern is disabling pointer events on a parent and re-enabling them on a specific child. Using `normal` here would silently fail, leaving the button unclickable:

```html
<!-- Incorrect -->
<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: normal; /* Invalid — button remains unclickable */
  }
</style>

<div class="overlay">
  <button class="close-btn">Close</button>
</div>
```

```html
<!-- Correct -->
<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: auto; /* Valid — button is clickable again */
  }
</style>

<div class="overlay">
  <button class="close-btn">Close</button>
</div>
```

In the incorrect version, the browser discards the invalid `pointer-events: normal` declaration entirely, so the `.close-btn` inherits `none` from the parent and cannot be clicked. Changing it to `auto` correctly restores interactivity on the button.