The community will undergo maintenance on October 16th at 10:00 PM PDT and will be unavailable for up to one hour.
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.
Solved! Go to Solution.
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
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;
}
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
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!