How to style disabled elements (specifically checkboxes)

App Building
,
1

Hej everyone,
I would like to style some of my disabled checkboxes differently. The default styling for disabled elements makes it often very difficult to read the values. See an example here:
checkboxes

I already tried by adding custom CSS to the app, which didn't work:

.ant-checkbox .ant-checkbox-checked .ant-checkbox-disabled {
    background: rgb(121, 28, 94);
}

What do I miss here? I just want the background color of the disabled checkbox to not be in the default light grey.

Thanks and best,
Timo

2

Hi Timo!

I finally got it to work :blush: Let me know if you have any questions at all.

Here's the CSS I used:

#retool-widget-checkbox1 > div > div._2ysVV > div._124-M._retool-checkbox1 > div > label > div._18qVn > div > div {
  background-color: green;
}

#retool-widget-checkbox1 > div > div._2ysVV > div._124-M._retool-checkbox1 > div > label {
  filter: none;
  webkit-filter: none;
}
1730×826 88.4 KB

3

Hi Victoria,

thanks for your reply. Unfortuntaly I wasn't able to reproduce this for my case. I did check all the elements in my app and tried to adapt your code to fit mine, but it didn't work.

Would be great if there would be a styling option for disabled elements.

Timo

4

Hi Timo! I'd be happy to step into your app to try getting this to work. Feel free to share your Cloud subdomain here or write into us at suport@retool.com anytime 😊