Can you add a circle shadow to a square p-checkbox from PrimeNG

bewa 0
Viewed 23

When using the checkbox found on https://primefaces.org/primeng/checkbox. Is there a way to create a circle drop shadow behind it. I am trying to have a hover property that shows a large background circle like the radio button below. When using box-shadow it shows as square background shadow. Are there any approaches to add a circle similar to a box-shadow?

CSS on Hover:

box-shadow: 0 0 0 8px lighten(blue, 65%);

HTML:

<div>
    <p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
    <label for="city1">Chicago</label>
</div>

<div>
    <p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="city2"></p-checkbox>
    <label for="city2">New York</label>
</div>

Desired drop Shadow appearance:

enter image description here

Current drop Shadow appearance:

enter image description here

css html
1 Answers

blur-radius is the third value box-shadow property.

This is the value you want to increase to get circle shadow. You can test it in your browser but I would suggest to increase it to at least 10px:

box-shadow: 0 0 10px 8px lighten(blue, 65%);
Piotr Migdał0
Related