nikkoli castilan
Rank: #4845
18Views
2Comments
Solved
How to change checkbox style
Question
CSS

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!: )

0
0
on 2020-12-01
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #73
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

2
0
on 2020-12-01
Copy link to comment
João Marques
Rank: #64

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

1
0
on 2020-12-01
Copy link to comment