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="flex flex-column 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 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 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>