Making Booleans / Checkboxes more attractive

1
What options are available to style a boolean field?  It seems that the way the default checkbox works it's immune to many of the styling techniques to make nice big colored checkboxes. I'd love to have my boolean display as a big green check for Yes and a red X for No. I know that I can do this by dropping two images with visibility rules on them, but that is so messy vs. CSS. What options are available? What about changing what the Text for a boolean says when it's Text (e.g. not Yes or No, but rather Valid or Invalid)
asked
3 answers
6

Hi Rob,

If you want to change the checkbox styles then you can use something like below example css to acheive what you want? (this css is for checkbox but if you want to implement this on radio buttons then change input type to radio input[type=radio] )

You have to just add tick and cross images or svg's in your images folder. Or if you just want to use red and green background without images then don't need to worry about adding images. 

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -moz-box-shadow: inset 0px 1px 2px #C8C8BE;
    -webkit-box-shadow: inset 0px 1px 2px #C8C8BE;
    box-shadow: inset 0px 1px 2px #C8C8BE;
    height: 26px;
    width: 26px;
    background: url(/styles/resources/images/cross-white.png) center/17px 12px no-repeat;
    background:red;
    float: left;
    position: relative;
    margin-top: 15px;
    margin-right: 0px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background: url(/styles/resources/images/tick-white.png) center/17px 12px no-repeat;
    background-color: green;
}

 

Hope this helps!

 

Cheers,

Mohammed Siddiqui

answered
2

Hi Rob,

Maybe this is something you are looking for:

https://appstore.home.mendix.com/link/app/1798/Mendix/Boolean-Slider
https://appstore.home.mendix.com/link/app/2586/Mendix/ICheck-Checkboxes

 

answered
1

You have to play a little bit with the HTML element structure, which is always a challenge in Mx. But the goal should be something like this fiddle. I managed to build this into a custom widget, but might also be possible in a default Mx page.

 

answered