How to Style an ADF Checkbox

By: Andreja Sambolec – Application Consultant

Sometimes, you want to customize your checkbox component by changing the background color.

This can be done using CSS and :after and :before pseudo classes on checkbox elements.

This is what a checkbox looks like:

code

The condition necessary to be able to change the background color:

The element must precede the

The steps to style a checkbox:

#1 Hide the checkbox

input[type=checkbox] {
opacity: 0;
}

#2 Use :checked and :before pseudo classes to style checkbox

.checkbox input[type=checkbox]:checked + label::before{
content: 'ON';
background-color: #428bca;
}

Read more on these steps here.

So, how do you apply these steps to ADF components?

To display a checkbox component in ADF, we are using af:selectBooleanCheckbox element:

<af:selectBooleanCheckbox value=”#{bindings.InternalApplication1.inputValue}”

text=”#{bindings.InternalApplication1.label}”

styleClass=”checkbox”

shortDesc=”#{bindings.InternalApplication1.hints.tooltip}”

id=”sbc1″

disabled=”true”/>

There are two options to set the label:

  1. Using label attribute– it’s placed before input component
  2. Using text attribute – it’s placed after input component

When using text, the result is:

<td valign=”top” nowrap=”” class=”AFPanelFormLayoutContentCell”>

<span class=”af_selectBooleanCheckbox_content”>

<span class=”af_selectBooleanCheckbox_content-input”>

<input id=”r1:0:sbc4::content” name=”r1:0:sbc4″ class=”af_selectBooleanCheckbox_native-input” type=”checkbox” value=”t” checked=”” onclick=”this.focus()”>

<label for=”r1:0:sbc4::content” class=”p_OraHiddenLabel”></label>

</span>

<label for=”r1:0:sbc4::content” class=”af_selectBooleanCheckbox_item-text”>Refugee</label>

</span>

</td>

 

When using label, the result is:

 

<tr class=”checkbox af_selectBooleanCheckbox p_AFDisabled” id=”r1:0:sbc1″ _adftrc=”r1:0:sbc1::icon-style”>

<td class=”af_selectBooleanCheckbox_label af_panelFormLayout_label-cell”>

<label class=”af_selectBooleanCheckbox_label-text” for=”r1:0:sbc1::content” id=”r1:0:sbc1::contentlabelId”>Internal Application</label>

</td><td valign=”top” nowrap=”” class=”AFPanelFormLayoutContentCell”>

<span class=”af_selectBooleanCheckbox_content”>

<span class=”af_selectBooleanCheckbox_content-input”>

<input id=”r1:0:sbc1::content” name=”r1:0:sbc1″ disabled=”” class=”af_selectBooleanCheckbox_native-input” type=”checkbox” value=”t” checked=”” onclick=”this.focus()” aria-labelledby=”r1:0:sbc1::contentlabelId”>

</span></span>

</td></tr>

 

We can see that only the option with text works because the label is set after the input element.

If you have the readOnly attribute set to ‘true’, replace it with ‘disabled=true’. This will make it easier to style.

This is what the CSS should look like:

/**hide checkbox*/
.checkbox input[type="checkbox"] {
opacity: 0;
width: 0px;
}

/*style label to display checkbox*/
.checkbox .p_OraHiddenLabel {
position: relative;
left: inherit;
font-size: 12px;
top: inherit;
content: "";
display: inline-block;
position: relative;
width: 17px;
height: 17px;
left: inherit;
margin-left: 0px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #428bca;
border-color: #428bca;
}

/*style for unchecked state
Set the content to have no issues with moving elements when switching between states – the content is hidden, but save space for it.
*/

.checkbox input[type="checkbox"]:not(:checked) + label:before {
content: "ON";
color: #428bca;
display: inline-block;
}

/*style for checked state*/
.checkbox input[type="checkbox"]:checked + label:before {
font-family: 'FontAwesome';
content: "\f00c";
display: inline-block;
}

/*styling disabled chheckbox*/
.checkbox input[type="checkbox"]:disabled + label {
background-color: #428bca;
border-color: #428bca;
opacity: 0.65;
}

/**/
af|selectBooleanCheckbox::item-text {
margin: 0px 1px;
padding-right: 3px;
padding-left: 2px;
vertical-align: middle;
margin-left: 1px;
left: -167px;
position: relative;
}

/**hide checkbox*/
.checkbox input[type="checkbox"] {
opacity: 0;
width: 0px;
}

af|selectBooleanCheckbox::content {
line-height: 19px;
}

The end result:

adf-blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: