Hi: I don’t know javascript and I have been trying to get this to work for hours. I have a multi picklist field called “Items Done”. In my Skuid page, I render it as checkboxes. Using CSS I have tried many options to get the .nxcheckboxwrapper to be green when the checkbox is checked and red when it is not, so that the staff can easily see what items they need to complete and it pops out at them more than just having the checkboxes. (Making a game of it, to get all items green instead of red). Listed below are the checkboxes and below that are the various css hacks I have tried, and I have done multiple combinations. None of them worked. Hellp!
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
