# Focus on a icon when clicked **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [March 14, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349 "2024-03-14T15:37:39Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\ **Post date:** [March 14, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/1 "2024-03-14T15:37:39Z")
Hello everyone, I'm trying to put focus on an icon when it's clicked, I tired the styles, within a style I created an elemnt state of focus, but when the icon is clicked, I can't get it to give it a focus. Also tried the `self.focus()` function within the events of the icon, more specifically in mouse events OnClick\*. Am I doing something wrong? I'd think it's something very simple that I'm omitting or I'm not doing it the right way. Either way thank you for your help, I look forward to your answers. ---
**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:** [March 14, 2024, 5:09pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/2 "2024-03-14T17:09:01Z")
In a standard GUI an icon can't take focus as its not a control (like a button, text input, dropdown, etc.). I think you'll find that you can't do it with a label either. Why would you want to? If you're using it as a button then use a button and set the icon property in it and no caption text. Create a Perspective style for transparent button and add that to the button style classes. Further thought: anything in Designer's Perspective Components Display section shouldn't be able to accept focus. They are "display" only despite being clickable. ---
**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\ **Post date:** [March 14, 2024, 5:33pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/3 "2024-03-14T17:33:06Z")
Thank you I didn't know icons couldn't get this feature, pretty new to CSS, thank you so much for the info! ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [March 14, 2024, 5:34pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/4 "2024-03-14T17:34:19Z")
Lots of knowledge to lay down here... For an element (Component) to receive focus, it must have an emitted HTML `tabindex` attribute. Icons do not have this. Most displays don't. Some do (Tables, Dashboard, Tag Browse Tree) because those Display components actually _contain_ an input. So as of today, there is no way to apply/force focus onto most of our display components. We just happen to be working on a feature for 8.1.39 which allows for specifying a `tabIndex` prop as part of the META category for every component which would allow for this functionality. This does NOT, however, mean that you should do this. Ask yourself why you're breaking an HTML pattern and if there's some other component or approach you could use instead. ---
**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:** [March 14, 2024, 5:36pm UTC](https://forum.inductiveautomation.com/t/focus-on-a-icon-when-clicked/87349/5 "2024-03-14T17:36:33Z")
> [@Josue\_Cuadras](#): > > pretty new to CSS It's nothing to do with CSS. It's the nature of the component and would be the same in applications written for Windows / Linux desktop and any web page. CSS (cascading style sheets) affect the _style_ of components, not their functionality. Separation of content and style is one of the key features of web design and it's worth getting a good understanding of that very simple principle. Actual implementation can be mind-boggling!