Changing the style on the "Checkbox" input?

Adobe XD UXP Plugin API
,
#1

Changing the style on the checkboxes (in the dialog) will result in inconsistency on Mac and Windows. What would be the best approach to change the style (for example the background color, which is originally transparent) on checkboxes, to have a consistent result on both Mac and Windows? It could be some simple method that I am missing.

PS — Assume that I do not want to create a completely custom checkbox programmatically, and I want to use the default structure that is suggested in the API documentation.

2 Likes
#2

It might help to know what you’re trying to accomplish. In general, you can get a (mostly) consistent layout with the following (here with an additional background color):

<style>
    .checkbox-wrapper {
        align-items: center;    
        background-color: white;
    }
</style>
<label class="row checkbox-wrapper">
    <input type="checkbox"/>
    <span>Check me</span>
</label>

Note that UWP and macOS widgets do have different sizes, so you won’t have 1:1 pixel perfection here. What you’ll be able to do in the next drop, however, is detect the platform in case you need to make any tweaks for one or the other.

2 Likes
#3

@kerrishotts Thank you, Kerri. in fact I am looking to style the checkbox itself (the element). As an example on when it might be needed, it can be used for when we have a checkbox over a dark area and the checkbox background should be white, but the wrapper background should stay transparent.

it would be ideal if we could have access to styling the element, something similar to when we use “-webkit-appearance: none” on the web and we style the element freely, if needed.