JSFのselectbooleancheckboxの背景色を変更したい

前提・実現したいこと

JSFのselectbooleancheckboxのスタイルを操作したいです。

チェックボックスのボックスの背景色を変更する機能の実装を考えていますが、そもそも背景色を変更できません。

【補足】
データベースから値を取得し、値があればチェックした状態でチェックボックスを出力させたいのでselectbooleancheckboxを使っています。
背景色を動的に変更するためだけの検討用のソースになってます。

該当のソースコード

java
1
2
3import javax.faces.bean.ManagedBean;
4import javax.faces.bean.SessionScoped;
5import javax.inject.Named;
6@Named
7@ManagedBean
8@SessionScoped
9public class IndexBean {
10
11	private String id;
12	private Boolean box;
13
14	public String doAction(){
15
16	     return null; //→現在の画面に留まる。ViewScopeの変数はそのままキープ。
17	}
18
19	public String getId() {
20		return id;
21		}
22
23		public void setId(String id) {
24		this.id = id;
25		}
26
27
28		public Boolean getBox() {
29			return box;
30		}
31
32		public void setBox(Boolean box) {
33			this.box = box;
34		}
35
36
37
38
39}
40

xhtml
1
2
3<?xml version="1.0" encoding="UTF-8"?>
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
5<html xmlns="http://www.w3.org/1999/xhtml"
6      xmlns:ui="http://java.sun.com/jsf/facelets"
7      xmlns:f="http://java.sun.com/jsf/core"
8      xmlns:h="http://java.sun.com/jsf/html"
9      xmlns:p="http://primefaces.org/ui"> 
10
11<h:head>
12<link rel="stylesheet" href="index.css"/>
13<script src= "Index.js"></script>
14<meta charset="utf-8"/>
15
16<title>Index Page</title>
17</h:head> 
18
19<h:body> 
20<h2>チェックボックス</h2>
21
22<h:form>
23
24	<p:selectBooleanCheckbox  id="selectckb1" value="#{indexBean.box}"  />
25    <h:outputLabel for="c1" value="チェックボックス1" />
26 <div>
27    <p:selectBooleanCheckbox id="selectckb2" value="#{indexBean.box}" />
28    <h:outputLabel for="c2" value="チェックボックス2" />
29  </div>
30 
31
32<h:commandButton value="画面内ボタンイベント"  action="#{indexBean.doAction}"  onclick="buttonClick();"/>
33
34</h:form>
35
36
37</h:body> 
38</html>

javaScript
1function buttonClick(){
2
3
4var elems = document.getElementsByClassName('ui-chkbox ui-widget ')
5
6var id = [];
7
8
9	/*idの値をとってきてid配列に格納*/
10 	for (var i = 0; i < elems.length; i++) {
11
12
13  /*idを取得できたので直接バックグラウンドを変更*/
14  	document.getElementById(elems[i].id).style.backgroundColor='#d5ecce';
15
16 id[i] = elems[i].id;
17 	}
18  /*アラートでｉｄ確認*/
19  alert(id);
20}

試したこと

①オブジェクトはあまり変更したくないので、cssだけで検討しましたがチェックボックスをカスタマイズ
display:none →にするとチェックの操作ができなくなり断念

②JSでスタイルクラスを操作しましたがチェックボックスの後ろのラベルの色が変更となって意図しない結果になります。
※現状のソースはJSで操作しようとしたものです

③primefaceのコンポーネントの利用を検討

Style Class	Applies

.ui-chkbox	コンテナのメイン要素です。
.ui-chkbox-box	チェックボックスアイコンのコンテナです。
.ui-chkbox-icon	チェックボックスのアイコンに使用します。

.ui-chkbox-box　：CSSでbackground-color: red;を設定すると
背景色が赤になりましたが、イベント操作で背景色を変更しようとするとチェックボックスの後ろのレベルの色が変更となって意図しない結果になります。

補足情報（FW/ツールのバージョンなど）

OS:Windows10 64ビット
Eclips：Version: 2020-12 (4.18.0)
UIコンポーネント：primeface4.0.jar
java 15.0.1 2020-10-20
Java(TM) SE Runtime Environment (build 15.0.1+9-18)
Java HotSpot(TM) 64-Bit Server VM (build 15.0.1+9-18, mixed mode, sharing)