Apply CSS On Hover to Shadow Dom Element

[travman7777]

I am trying to conditionally style a checkbox widget, box background when both the box and any other part of the checkbox widget are hovered over.  However I am unable to override the default background color.  Through Google inspection tool I can disable the background color being applied and my styling apply as intended.  How can I override the defaults using custom CSS?

A theme with the custom css and a checkbox mashup have been attached for recreation.  As well as pictures showing current behavior.  Note, screen shots did not capture cursor hovering over checkbox label.

[PEHOWE]

@travman7777 

Here is some sample CSS which has more modification they you requested.

/* Set border width, color, background when checked */
.widget-ptcscheckbox:not([disabled])[checked]::part(box){ 
    border-width: 5px;
    border-color: green;
    background: purple;
    width: 28px;
    height: 28px;
}
/* Set border width, color, background when not checked */
.widget-ptcscheckbox:not([disabled])::part(box){ 
    border-width: 5px;
    border-color: red;
    background: orange;
    width: 28px;
    height: 28px;
}
/* Modify check when checked*/
.widget-ptcscheckbox:not([disabled])[checked]::part(check-mark) { 
   	width: 24px;
   	height: 24px;
}

Peter

[travman7777]

Hi Peter,

Thank you for your response.  I have modified your code as follows, and it gets me 90% there.  What I intended to do is to disable the box background color when hovering.  I am successful in doing this however only when I am hovering over the box itself, and not any other part of the checkbox widget (label, margin, etc).  The pictures I attached illustrate this.  I can't seem to set a hover event for the checkbox widget and then apply the styling to a descendant in the shadow dom.  Some things I have tried are listed as well.

Modified Code Resulting in behavior shown.

/* Set border width, color, background when checked */
.widget-ptcscheckbox:not([disabled])[checked]::part(box){ 
    border-width: 1px;
    border-color: black;
    background: white;
}
/* Set border width, color, background when not checked */
.widget-ptcscheckbox:not([disabled]){ 
    border-width: 1px;
    border-color: black;
    background: white;
}

/* Set border width, color, background when not checked */
.widget-ptcscheckbox:not([disabled])::part(box):hover { 
    border-width: 1px;
    border-color: black;
    background: white;
}

Unsuccessful Solutions

.widget-ptcscheckbox:not([disabled]):hover ::part(box){ 
    border-width: 1px;
    border-color: black;
    background: white;
}

.widget-ptcscheckbox:not([disabled]):hover ::part(box) .widget-ptcscheckbox:not([disabled]):hover::part(box){ 
    border-width: 1px;
    border-color: black;
    background: white;
}

[mgoel]

@travman7777 

If you feel previous response on tis thread was helpful, please mark that as accepted solution for the benefit of other community users.

Regards,

Mohit

[PEHOWE · Accepted solution]

@travman7777 ,

I had to ask for assistance. Here is the solution you need to add:

.widget-ptcscheckbox:not([disabled]):hover::part(box){ 
    border-width: 1px;
    border-color: black;
    background: white;
}

Now I know this looks like one of the entries which you identified as not working, I have removed a "space" between ":hover" and "::part". 

Please give it a try and let me know.

Thanks

Peter

[travman7777]

That does it!  Thanks a bunch!