# Perspective Client Buttons have selected Text Labels

**URL:** <https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 13, 2023, 6:18pm UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429 "2023-04-13T18:18:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aaron\_Shivnen](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Aaron\_Shivnen](https://forum.inductiveautomation.com/u/Aaron_Shivnen)\
**Post date:** [April 13, 2023, 6:18pm UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/1 "2023-04-13T18:18:44Z")

</div>

I usually work with Vision. Now I am taking over a perspective project and I have a bit of a pet peeve right now with my touch screen button components.

The Text embedded in the button is selectable from the client screen. So if you click the button on a touch screen it will highlight the text and not actually trigger the button. You have to click in an area that has no text.

I would like to disable this ability to highlight the button label. I can't find a property for this.

Thank you.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [April 13, 2023, 10:06pm UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/2 "2023-04-13T22:06:12Z")

</div>

Set `prop.style.cursor: pointer`

For anything Perspective styling, you can try searching for CSS props relating to what you want to do. Styling here is a bit wider reaching, and includes things like cursor icons, mouse events (e.g. disabling them), animations, options when components "overflow" the container, etc.

Note: only a select number of css props are exposed by the style editor in the designer, however you can add any valid css prop directly into the style prop manually if it's not exposed.

Ps, you might want to create a set of perspective styles and include some that style your buttons and that include the cursor: pointer style

---

<div class="post-metadata">

**Author:** ![Filip\_Olsen](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@Filip\_Olsen](https://forum.inductiveautomation.com/u/Filip_Olsen)\
**Post date:** [September 21, 2023, 7:03am UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/3 "2023-09-21T07:03:03Z")

</div>

Hi, this does not work on a touch device.  
And I struggle a lot to figure this out.

My project was working perfect on the computer, but when was finnish and open it on my touch device, all text is highlighted and it`s hard to actually press the buttons.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 21, 2023, 7:46am UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/4 "2023-09-21T07:46:23Z")

</div>

Solved by @victordcq in

> [@Text highlighting on button hold](https://forum.inductiveautomation.com/t/text-highlighting-on-button-hold/77388/7):
>
> i dont really have this highlighting issue. anyways you could try adding adding this to styles user-select: none

Add a property to the button style,  
`user-select : none`

---

<div class="post-metadata">

**Author:** ![Filip\_Olsen](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@Filip\_Olsen](https://forum.inductiveautomation.com/u/Filip_Olsen)\
**Post date:** [September 27, 2023, 7:16am UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/5 "2023-09-27T07:16:42Z")

</div>

Thank you, I did this and it did work very good !  
But "chrome" still try to search for that text it can`t select.

So it is a Decent solution, but not the best.

I would rather make a invisible box on top of the text that link to the correct page\item.  
But since I using Tab menu, it is allot of work.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [September 27, 2023, 7:33am UTC](https://forum.inductiveautomation.com/t/perspective-client-buttons-have-selected-text-labels/72429/6 "2023-09-27T07:33:27Z")

</div>

> [@Filip\_Olsen](#):
>
> But "chrome" still try to search for that text it can`t select.

That sounds like a problem with the Chrome touch screen driver settings. I would investigate that to see if there is a setting for that.

Related:

> [@Perspective Touchscreen Long Press](https://forum.inductiveautomation.com/t/perspective-touchscreen-long-press/67766/6):
>
> Using Perspective 8.1.26 and Chrome browser on a touch screen, to resolve the problem that the text on a button was selected with a long press on the button, under Styles, I added the stylesheet.css with the entry: \* { -webkit-touch-callout: none; /\* for Safari on iOS only \*/ -webkit-user-select: none; /\* for Safari \*/ user-select: none; } (The entry was suggested in [Perspective Mouse event, disable cut/copy/paste on iPad - #11 by Chris\_Kociolek](https://forum.inductiveautomation.com/t/perspective-mouse-event-disable-cut-copy-paste-on-ipad/25650/11); the \* means the styling will apply to every com…
