'Is there a way to create a box shadow shape that is different from the element?

I'm trying to create a circular box shadow on a checkbox input when I hover over it but it takes the shape of the element. How do I change the shape of the box shadow to be a circle instead?

Circle behind the checkbox on hover

<input type="checkbox" class="check">
<label for="checkbox">Pepperoni</label>

.check {
  &:hover {
    box-shadow: 0 0 0 6px red;
  }
}
htmlcss


Solution 1:[1]

Use clip-path:

.check:hover {
  box-shadow: 0 0 0 20px red;
  clip-path: circle(90%);
}
<input type="checkbox" class="check">
<label for="checkbox">Pepperoni</label>

Solution 2:[2]

It's easier when you wrap the input with a div and then the input doesn't matter anymore, because you can do whatever you want, and place that on top or behind the input:

body{
  text-align: center;
  padding: 2em;
}

.input-wrap { 
  position: relative;
  display: inline-block;
  line-height: 0;
}

.input-wrap::before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  padding-top: 100%;
  box-shadow: 0 0 0 6px red;
  border-radius: 50%;
}

.input-wrap input { 
  margin: 0;
}
<div class='input-wrap'>
  <input type="checkbox" class="check">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif
Solution 2 vsync

Related Questions