Pointer Events

Whether an elements reacts to pointer events or not.

Classes
Class Properties
pointer-events-none pointer-events: none;
pointer-events-auto pointer-events: auto;
Examples

Try clicking the caret icon to open the dropdown

pointer-events-auto (event captured)

pointer-events-none (event passes through)


<div class="card flex flex-column align-items-center justify-content-center">
    <p class="font-bold">Try clicking the caret icon to open the dropdown</p>
    <p>pointer-events-auto (event captured)</p>
    <div class="relative w-12rem mb-3">
        <select class="block appearance-none w-full p-2 border-round">
            <option>Indiana</option>
            <option>Michigan</option>
            <option>Ohio</option>
        </select>
        <div class="pointer-events-auto absolute bg-blue-300 flex align-items-center p-2 border-round-right" style="top:0; bottom: 0; right: 0">
            <svg class="h-1rem w-1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
        </div>
    </div>

    <p>pointer-events-none (event passes through)</p>
    <div class="relative w-12rem">
        <select class="block appearance-none w-full p-2 border-round">
            <option>Indiana</option>
            <option>Michigan</option>
            <option>Ohio</option>
        </select>
        <div class="pointer-events-none absolute flex bg-blue-300 flex align-items-center p-2 border-round-right" style="top:0; bottom: 0; right: 0">
            <svg class="h-1rem w-1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
        </div>
    </div>
</div>