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

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

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.

1 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!

Top Tags