# Can't Change Button Border When Selected

**URL:** <https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 7, 2025, 11:11am UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176 "2025-07-07T11:11:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [July 7, 2025, 11:11am UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176/1 "2025-07-07T11:11:32Z")

</div>

I have 4 buttons on a page that are running this code

```python
> def runAction(self, event):
> # Define selected and default styles
> selected_bg = "#757575"
> default_bg = "#151515"
> default_border = "1px solid #444444" # Optional: restore a border to unselected buttons
> 
> # Get all sibling components in the same container
> parent = self.parent
> for child in parent.getChildren():
> if 'backgroundColor' in child.props.style:
> child.props.style['backgroundColor'] = default_bg
> 
> # Restore border to unselected buttons
> if 'border' in child.props.style:
> child.props.style['border'] = default_border
> 
> # Apply selected style to the clicked button
> self.props.style['backgroundColor'] = selected_bg
> self.props.style['border'] = "none" # Removes the border on selected button

```

I've noticed that despite the line I have in regards to not having a border color when selected, I am still getting this thin blue line around the buttons.

Does anyone know what I might be missing that will get rid of that blue border?

---

<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:** [July 7, 2025, 11:33am UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176/2 "2025-07-07T11:33:41Z")

</div>

That's the focus outline. It tells the user that pressing spacebar will trigger a button event. If you remove it your user is reduced to using mouse or touch screen (or hitting the keyboard in the hope that the focus is on the right component).

Try adding this to your Styles | stylesheet.css:

```python
button:focus{
    outline: none;
}

```

On a more general note, define the styles in a style class - it's the way of the web - rather than hard-coded. That way you can be consistent across your project and a global change is simple.

Also, if you use the Multi-State Button component you could probably eliminate the script. Add the style setting `gap : 40px` or whatever to space them out. I should be telling you to do this via the stylesheet but I haven't time to work it out.  
Use `states.x.selectedStyle` and `states.x.unselectedStyle` to define the appropriate style class for each case and delete the default backgroundColor properties (as these will be defined in your style class).

---

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [July 7, 2025, 12:04pm UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176/3 "2025-07-07T12:04:11Z")

</div>

I have the default styles defined in the style section of the props editor, but I couldn't find a way to have the button change color on selection and only allow one button to be 'selected' at a time without adding the script. Maybe that's because I didn't use the multi-state button? I've only been using ignition for a couple weeks, so it's all been sort of cobbled together as I go.

 ![Forum Screenshot 10](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e5d93b2ed0957130dc530aa12bed046c3cc69f55.png)

---

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [July 7, 2025, 12:07pm UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176/4 "2025-07-07T12:07:04Z")

</div>

Adding that line to the stylesheet worked perfectly though! Thank you!

---

<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:** [July 7, 2025, 12:09pm UTC](https://forum.inductiveautomation.com/t/cant-change-button-border-when-selected/108176/5 "2025-07-07T12:09:21Z")

</div>

> [@annikaciul](#):
>
> I've only been using ignition for a couple weeks, ...

Well you've got a better sense of understated style than many of the contributors!

Try the multi-state. It should be very simple to replicate what you've set up but much cleaner.