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

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" >
<label for="checkbox">Pepperoni</label>

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

CodePudding user response：

Use clip-path:

.check:hover {
  box-shadow: 0 0 0 20px red;
  clip-path: circle(90%);
}

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

CodePudding user response：

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" >
</div>