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:
Current drop Shadow appearance:
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%);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.