# Disabling Text Selection and Image Dragging in Perspective Using CSS (Advanced Stylesheet)

**URL:** <https://forum.inductiveautomation.com/t/disabling-text-selection-and-image-dragging-in-perspective-using-css-advanced-stylesheet/117563>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 21, 2026, 7:21am UTC](https://forum.inductiveautomation.com/t/disabling-text-selection-and-image-dragging-in-perspective-using-css-advanced-stylesheet/117563 "2026-10-21T07:21:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kmchoi](https://avatars.discourse-cdn.com/v4/letter/k/d07c76/32.png) [@kmchoi](https://forum.inductiveautomation.com/u/kmchoi)\
**Post date:** [October 21, 2026, 7:21am UTC](https://forum.inductiveautomation.com/t/disabling-text-selection-and-image-dragging-in-perspective-using-css-advanced-stylesheet/117563/1 "2026-10-21T07:21:57Z")

</div>

I've been working on preventing accidental text selection and native image dragging in Perspective for customers who use Ignition Perspective as HMI, particularly when interacting with buttons, read-only texts, images, and embedded views.

I wanted to disable these behaviors across the application without interfering with normal component interactions, especially input fields and buttons.

I also added an exception for cases where text selection is actually needed. Setting a component's Meta → DOM ID to something starting with drag-allowed (e.g., drag-allowed-texts) excludes that element and its descendants from the global restrictions.

One thing I wanted to avoid was applying pointer-events: none directly to Perspective components, since that could interfere with their normal behavior. Instead, I limited it to the internal image and SVG elements.

Just sharing what I've come up with in case anyone else has been dealing with the same issue.

```css
/* =========================================================
Perspective - Prevent Text Selection / Native Dragging

Default:
- Disable text selection and native browser dragging
- Include Embedded Views, Containers, and One-Shot Buttons

Exceptions:
- Input fields and editable content
- Elements with a domId starting with "drag-allowed"
  and all their descendants

Pointer Events:
- Disable only internal img / canvas / svg in Image components
- Disable decorative img / svg inside Buttons
- Keep pointer-events unchanged on components themselves
========================================================= */

/* Disable text selection and native dragging globally */
#app-container,
#app-container *:not(
    [id^="drag-allowed"],
    [id^="drag-allowed"] *,
    input,
    textarea,
    [contenteditable=""],
    [contenteditable=""] *,
    [contenteditable="true"],
    [contenteditable="true"] *,
    [contenteditable="plaintext-only"],
    [contenteditable="plaintext-only"] *
) {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Allow text selection in editable and excluded areas */
#app-container :is(
    input,
    textarea,
    [contenteditable=""],
    [contenteditable="true"],
    [contenteditable="plaintext-only"],
    [id^="drag-allowed"]
) {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Image components: preserve existing pointer behavior */
#app-container
[data-component="ia.display.image"]
:is(img, canvas, svg):not(
    [id^="drag-allowed"],
    [id^="drag-allowed"] *
) {
    pointer-events: none;
}

/* Decorative images inside regular and One-Shot Buttons */
#app-container
:is(
    [data-component="ia.input.button"],
    [data-component="ia.input.oneshotbutton"]
)
:is(img, svg):not(
    [id^="drag-allowed"],
    [id^="drag-allowed"] *
) {
    pointer-events: none;
}

```