Making Booleans / Checkboxes more attractive

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)
3 answers

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;
    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!



Mohammed Siddiqui


Hi Rob,

Maybe this is something you are looking for:



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.