# Conditional Colouring of Checkbox Group background

**URL:** <https://discourse.bokeh.org/t/conditional-colouring-of-checkbox-group-background/10353>\
**Category:** Community Support\
**Created:** [April 14, 2023, 7:15pm UTC](https://discourse.bokeh.org/t/conditional-colouring-of-checkbox-group-background/10353 "2023-04-14T19:15:58Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [April 16, 2023, 1:40pm UTC](https://discourse.bokeh.org/t/conditional-colouring-of-checkbox-group-background/10353/7 "2023-04-16T13:40:17Z")

</div>

Awesome thanks, that gets me very close (and potentially close enough depending on how involved this next part is):

With the above sort of example, I’m able to write out different selectors for various values and adjust the label properties of individual checkbox items, e.g.

```auto
div.bk-input-group input[type='checkbox'][value="1"] ~ span { color: yellow; }

```

will target the middle checkbox in my example.

What I actually want to target is the color of the checkbox ICON when enabled/“on”…

Looking at the existing style, I THINK it’s the “#66afe9” assigned to border-color in .bk-input:focus →

 ![image](https://discourse-uploads.bokeh.org/original/2X/7/7cbe0d2e1079d7061e48d9cbfda3fd913fc4a5d9.png)

At least that’s the only hex code corresponding to that shade of blue i can find…

How to target that?

```auto
div.bk-input-group input[type='checkbox'][value="1"].bk-input:focus{ 
                                                        border-color: red;                                                         
                                                        }

```

Doesn’t work… but I did notice that:

```auto
div.bk-input-group input[type='checkbox'][value="1"]{ 
                                                        appearance: none; 
                                                        }

```

can remove the icon entirely… and looking at it in the the browser editor:

 ![image](https://discourse-uploads.bokeh.org/original/2X/6/652f304a870ae947558e840ad98158b95504e26d.png)

There are options like initial/revert/auto etc. By putting appearance: none in my stylesheet I am overriding the appearance attribute from the user agent stylesheet… but I’m not able (yet) to “break in” any further and edit said appearance…

---

_[View the full topic](https://discourse.bokeh.org/t/conditional-colouring-of-checkbox-group-background/10353)._