We have some toggle buttons on a form and I would like to change the color of the circle on the button when the user checks it. It seems to work when the form is enabled but once the case is closed and the form is disabled I cannot find a way to change the colors for true/false.
In the example below when the form is disabled the circles for both True and False are brown. Is there a way to specify a color for true and another for false?
SyntaxEditor Code Snippet
.toggle-button.toggle-button-disabled:after { background-color: brown; }
Is this the behaviour you're looking for?
https://afonsobc.outsystemscloud.com/ToggleButtonCSS
This is the simplest CSS I can think of to do what you want, but note that IE8 won't support this pseudo-class. I'm guessing that's not a problem since we were talking about pseudo-classes before:
.toggle-button:not(.toggle-button-checked) { background-color: red; } .toggle-button.toggle-button-checked { background-color: green; }
Can you please provide this application .oml file for reference to check the CSS.
Hi Josh,
I'm assuming you mean a checkbox or a radio button when you talk about the user checking it. Your CSS selector doesn't seem to distinguish between states. Did you try using this pseudo-class?
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
Here's a working example with disabled radio buttons:
https://jsfiddle.net/uecrzvdh/
This is an outsystems toggle button widget
https://www.outsystems.com/outsystems-ui/patterns/web/ToggleButton
It looks like it's a type of wrapper that is actually using a checkbox.... but no matter what I try I cannot style the checked/unchecked differently when the element is disabled. Attached is a screenshot showing how the element is rendered.
The toggle-button-checked class looks promising, have you tried using it? If it gets applied regardless of it being disabled or not, it should be just right for your purposes.
What happens when you add this to your page?
.toggle-button-checked { background-color: brown; }
Afonso Carvalho wrote:
I tried this and I don't see any difference in the toggle color whether it is enabled or disabled. It seems to be totally ignored.
How about this:
Try adding a background-color to that class (.toggle-button-toggle-button-checked:after)
No luck there, but I have been successful in getting the active colors to swap. On the disabled form the check (true) toggles are displayed as green but uncheck(false) are the default grey.
I added the .toggle-button.toggle-button-disabled to the css and it changes both the checked and unchecked background color to red. So it does format the color but a little to effectively.
.toggle-button.toggle-button-checked { background-color: green; } .toggle-button { background-color: red; } .toggle-button.toggle-button-disabled{ background-color: red; }
Can you try this?
.toggle-button.toggle-button-disabled.toggle-button-checked:after{ background-color: red; }
With and without the :after
No luck, with the :after it changes the circle portion of the selector to red. WIthout it seems to do nothing.
I'm wondering if there is just no way to accomplish what I want. As far as I can tell in CSS there is no way to use both :disabled and :checked at the same time and to pull off what I want I would basically have to do that.
I don't think you have to use both pseudo-classes at once: with the different classes that get added to the div when it changes state it should be enough for what you need.
Could you could do a writeup on what should happen in each case when the input is enabled/disabled/checked/unchecked?
Sure, I’m trying to do the following.
Toggle enabled:
True- background = green
False - background = red
Toggle disabled:
False- background = red
By default disabled is light grey background for both true/false. Which is not optimal.
This is exactly what I was trying to do. Thanks so much!
The only downside I can see is that hover highlighting is no longer possible.
*edit just need to add a :hover rule and that works great too... all set, thanks!