How to change checkbox style

nikkoli castilan

Solved

Question

Hello I want to change how the checkbox looks like, how do i achieve it so that my checkbox will look like this when its disabled?:

when Disabled

Thank you!: )

01 Dec 2020

Benjith Sam

MVP

Solution

Hi nikkoli,

For the mentioned use-case, I could suggest you two solutions.

Solution 1:

1) Use the Icon widget with Plus-Square and Minus-Square Icon

2) Encapsulate both the Icons within IF widget

3) Toggle the IF widget Boolean value based on the user selection

Solution 2:

- Add the below mentioned CSS definition to the Screen Style Sheet section

[data-checkbox]:before {
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-width: 0 0 2px 2px;
    display: table-cell;
    background: #000;
    color: white;
    content: "\f068";
    font-family: FontAwesome;
    text-align: center;
    vertical-align: middle;
}

[data-checkbox]:checked:before {
    content: '';
}

See this sample app

Hope this helps you!

Kind regards,

Benjith Sam

01 Dec 2020

João Marques

MVP

Hi nikkoli,

For that, you will need to add some CSS to your Theme (for example) and for that, locate your theme under the Themes folder, under the Interface Tab and on the Style Sheet property add the following CSS:

[data-checkbox][disabled]:before, [data-checkbox][disabled]:checked:before {

border-color: black;

background-color: black;

}

[data-checkbox][disabled]:checked:after {

border-color: white;

color: white;

transform: none;

border-width: 0px 0px 2.5px 0px;

}

The value of your checkbox variable will have to be true in order to display the white dash.

You can change the 2.5px to more or less if you want the dash to be thicker or not.

Here's a glimpse on how it looks:

Hope it helps.

Regards,
João

01 Dec 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines