Checkbox styling

2
Hi Experts,   I’m trying to influence the styling of the default checkbox that comes in the Atlas 3 UI for responsive web pages. Out of the box it comes with a line around the checkbox area that is barely visible on a standard blank page. I’d like to make that outline a little darker, or even another color. The widget does some color changing of the outline of the checkbox once it is toggled between false and true and then back to false again. Can anyone tell me where the standard styling is for the checkbox, and what I should add/change to achieve what I’m after? I’m striking out with support, who are trying to tell me that doing what I want is a feature request to change the checkbox as it is. Maybe they’re right, but since nothing seems to happen with any priority on this in Mendix (or at least that I can discern in the last year) maybe you all know something I can do myself in the mean time with styling.
asked
2 answers
4

Hi Ron,

 

You can easily fix this by styling using sass / css. Add the following lines to your main.scss (or to a custom scss file if you use that):

 

input[type=checkbox]:before {
    border: 1px solid black;
}

 

This will give all existing checkboxes a black outline. However you can change the thickness and color of the border any way you like. Hopefully this helps.

 

In case this solves your question, please mark this answer as accepted.

answered
1

Hi Everyone.

I experienced the same issue with the radio buttons border.

Here is how I fixed that, after Davy gave me earlier reply:

input[type=radio]:before {

    border: 1px solid black;

}

Enjoy.

answered