Trying to make a multi picklist field (rendered as checkboxes) show green for checked and red for un

Corinne,

I am not sure that this can be done without using a custom field renderer. The issue is that when the checkbox is checked an attribute on the input element changes (aria-selected goes from false to true). The label that you want to style is a ‘parent’ element of the checkbox. I don’t think you can select the parent element from the child element without using JavaScript.

Here is a page that shows some things you can do with CSS.

<skuidpage personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="UIOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="Multiipicklist" displaytype="MULTIPICKLIST" label="Multiipicklist" ogdisplaytype="TEXT" picklistsource="manual">
                    <picklistentries>
                        <entry value="One" label="One"/>
                        <entry value="Two" label="Two"/>
                        <entry value="Three" label="Three"/>
                    </picklistentries>
                </field>
                <field id="Checkbox" displaytype="BOOLEAN" label="Checkbox" ogdisplaytype="TEXT"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="UIOnly" uniqueid="sk-1unC-387" mode="edit">
            <columns>
                <column width="50%">
                    <sections>
                        <section title="Section A" collapsible="no">
                            <fields>
                                <field uniqueid="sk-1unC-407" id="Multiipicklist"/>
                            </fields>
                        </section>
                    </sections>
                </column>
                <column width="50%">
                    <sections>
                        <section title="Section B">
                            <fields>
                                <field uniqueid="sk-1vDz-259" id="Checkbox"/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css>
            <cssitem location="inline" name="colorpicklist" cachelocation="false">/*input[aria-selected="true"]{*/
/*    width:4em;*/
/*    height:4em;*/
/*    color: green !important;*/
/*    border-width:2em;*/
/*    padding:4em*/
/*}*/
label[for^="ui-multi"] {
    background: #ffff00;
}
input[type=checkbox]:checked {
    width:4em;
    height:4em;
} 
</cssitem>
        </css>
        <actionsequences uniqueid="sk-1unC-253"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thanks,

Bill