Hi,
I am trying to change the border color of a checkbox, but the CSS is not working when I add it to the application theme. When I apply the style directly from the browser’s Inspect tool, it works correctly. However, once I move the same CSS to the app theme, it gets overridden and does not apply.
Below is the CSS I used. Could you please review it and provide the correct CSS for this requirement?
.my-blue-checkbox [data-checkbox]:before { border: var(--border-size-m) solid #0066CC; }
Thanks
Shivangi
You can try this CSS:
.my-blue-checkbox [data-checkbox]:checked:before,
.my-blue-checkbox [data-checkbox]:hover:before,
.my-blue-checkbox [data-checkbox]:before {
border: 2px solid #0066cc;
}
Hi @Shivangi Thakur
The CSS works correctly on my side.
It’s possible that your selector is being overridden by a more specific internal selector. Please take a look at this documentation:
https://success.outsystems.com/documentation/11/building_apps/user_interface/look_and_feel/cascading_style_sheets_css/
Could you share your OML file so I can investigate further?
Oml will be from my personal env and in personal its working fine.
Hi @Shivangi Thakur ,
The checkbox border color wasn’t changing because OutSystems UI’s default CSS had higher specificity and was overriding the custom style defined in the Theme.
To fix it, increase the CSS selector specificity (and use !important only if needed).
You cam also try below CSS:
/* Option A */
.my-blue-checkbox input[type=checkbox][data-checkbox]:before {
border: var(--border-size-m) solid #0066CC;
/* Option B */
.my-blue-checkbox .checkbox-wrapper input[type="checkbox"][data-checkbox]:before {
border: 2px solid #0066CC !important;
Hope this helps.
Regards,
Manish Jawla
Not sure what is missing but still it didn't work.
hi @Shivangi Thakur
You can check below oml file I have attached. You need like that checkbox then you can add this CSS:
.my-blue-checkbox [data-checkbox]:checked:before {
background-color: transparent;
.my-blue-checkbox [data-checkbox]:checked:after {
.my-blue-checkbox [data-checkbox] {
width: 20px;
height: 20px;
I hope this helps
Do I need to apply all of this? I just need to change border color.
You can add class my-blue-checkbox to parent container and check
You can use the Developer Tools available in your browser, which you can usually open by pressing F12. Then, inspect the classes and styles applied to the checkbox. There, you can identify which styles / classes are overriding your class.
Guidance: What are browser developer tools?
Please review if any CSS applied at the screen level or theme level is overriding your checkbox styling. Additionally, kindly verify the base theme for any conflicting styles.
Shradha Rawlani
Hello @Shivangi Thakur,
I think there’s just a small mistake based on my testing. You added:
You only need to include one more colon before before, like this:
.my-blue-checkbox [data-checkbox]::before { border: var(--border-size-m) solid #0066CC; }
I tested it, and it worked.
The Css was correct, the mistake i made is I applied it to the checkbox, I enclosed it inside the container then applied the css to the container and it worked.
Thanks for your help!