Select an element behind a div on click?

Question

I have a select element that looks like this:

The arrow in there is a custom element. I'd like to make it so that the error is "invisible" to the mouse, and clicking it will actually select the element behind it. I tried using onClick on the arrow to focus() the select, but that doesn't actually initiate the dropdown menu:

Is there some kind of CSS magic trick that'll let me do this?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Aug 23 '22 at 15:22

score 1 · Accepted Answer · answered Aug 23 '22 at 15:20

1

You are probably looking for pointer-events: none.

none
The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value.

source: mdn

answered Aug 23 '22 at 15:20

Jax-p

7,225
4
28
58

Select an element behind a div on click?

1 Answers1