Change color of selected WebSegmentedButton

Hopefully an easy one, but I am struggling with how to accomplish this. How do you change the color of the selected WebSegmentedButton? Like if I want the one chosen to be red and the unselected ones to be gray?

Looks like you can use the style method for this see WebSegmentedButton — Xojo documentation

I haven’t used WebSegmentedButton but it looks like the style is based on .btn-secondary
image

but Xojo is not showing the Indicator options for this, so we can’t change the Appearance Indicator.

You can add this to App HTMLHeader:

<style>
.btn-check:checked+.btn { background-color: #dc3545; }
</style>

to get this:
ezgif.com-video-to-gif (36)


Edit: WebSegmentedButton uses btn-light in light mode and btn-secondary in dark mode

3 Likes

Thanks Wayne. I did see that, but it was changing the color of the whole control and not just the one button. Hence why I was checking for the proper way to use style on just the selected seg button. There could still be a way, but I just couldn’t get the logic

Thanks Alberto! I’ll give this a try tomorrow

Hi Alberto. That is a really neat trick and it works well! Do you know what the style syntax is to change the color of the not selected ones and to change the text color (foreground color I am assuming)

Teach a man to fish… Where can I find the trick for the HTML Header as you have below? Is this in the documentation somewhere? This might be a better approach for me to dig around and learn

You can add this code to the HTML header of the app.

  • select app in the navigator
  • click the edit icon next to the html header, on the right hand side of the screen.

hope this helps.

Hi Louis, thanks for responding. Yes, I did find this is the place to add the script, but I was now looking more for where to find additional examples of the code Alberto posted, specifically how to use the code he posted to change the color of the selected button, plus changing the color of the unselected button(s) and the text color of the control. Thought it would be better to ask “where to find” as opposed to “how to do”

Haven’t tested but regular style for Color and BackgroundColor should work.

Alberto is very skilled and actually spent the time to build you a good answer. It’s not the result of any “trick”, it required several parts and the experience to know how to put them together.

Parts you’ll want to learn about:

  • CSS Selectors
  • HTML DOM (Document Object Model)
  • Web Developer Tools

No

1 Like

One source of documentation would be https://www.w3schools.com/

Tested, add this to opening event:

Me.Style.BackgroundColor = Color.Orange
Me.Style.ForegroundColor = Color.Black

but you will need to update the App HTMLHeader code to:

<style>
.btn-check:checked+.btn { background-color: #dc3545 !important; }
</style>

to get this:
ezgif.com-video-to-gif (37)

Homework:
Can you figure it out what you need to do to have white text when the selection is red?
Hint: you need to add code to App HTML Header

1 Like

You rock Alberto! And thank you for the challenge. After about 6 trial and errors, I did find how to change the selected button’s text color to white. I enjoy learning things like this, so thank you again

<style>
.btn-check:checked+.btn { background-color: #dc3545 !important; }
.btn-check:checked+.btn {color: #ffffff !important; }
</style>

Screen Shot 2023-10-18 at 11.16.31 AM

Completely agree! Web is a new venture for me, and I believe he has responded to many of my posts. Cannot thank him enough

I have come across this site before and will be diving into this more. Thanks Tim!

1 Like

Great!
you can simplify that to:

<style>
.btn-check:checked+.btn { background-color: #dc3545 !important;
     color: #fff !important; }
</style>

if you want.

1 Like

Simplified code is great! Thanks again