Skip to main content
T
travman777712-Amethyst
12-Amethyst
May 28, 2021
Solved

Apply CSS On Hover to Shadow Dom Element

  • May 28, 2021
  • 2 replies
  • 6331 views

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.

Best answer by PEHOWE

@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

2 replies

P
PEHOWE17-Peridot
17-Peridot
May 28, 2021

@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

T
travman777712-AmethystAuthor
12-Amethyst
June 1, 2021

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;
}
M
mgoel5-Regular Member
5-Regular Member
May 31, 2021

@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

P
PEHOWE17-PeridotAnswer
17-Peridot
June 2, 2021

@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

T
travman777712-AmethystAuthor
12-Amethyst
June 2, 2021

That does it!  Thanks a bunch!

Terms & ConditionsCookie settingsAccessibility statement