cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

The community will undergo maintenance on October 16th at 10:00 PM PDT and will be unavailable for up to one hour.

Apply CSS On Hover to Shadow Dom Element

travman7777
9-Granite

Apply CSS On Hover to Shadow Dom Element

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.

ACCEPTED SOLUTION

Accepted Solutions
PEHOWE
16-Pearl
(To:mgoel)

@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

View solution in original post

5 REPLIES 5

@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

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
17-Peridot
(To:travman7777)

@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
16-Pearl
(To:mgoel)

@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

That does it!  Thanks a bunch!

Announcements


Top Tags