当 input:checked 时嵌套的 <div> 边框不会留在主 <div> 内

Question

• 我有一个主要职位：相对。

• 嵌套（输入复选框）位置：绝对。

• 选中复选框后，内部 div 颜色将缩放到 500 像素。问题是颜色会溢出它的主要颜色。

• 这是复选框边框溢出主方块的屏幕截图。 https://pasteboard.co/I7uA6am.jpg

• 我想要做的是当我们点击右下角的圆形复选框时。该复选框的背景颜色将填充整个主体，即 300 像素 x 400 像素的矩形。在这种情况下，复选框边框几乎占据了整个屏幕，因为它设置为 500 像素。

我试过了 - Z指数 - 将 box-shadow 变换的宽度设置为主要宽度的 100% - 溢出：隐藏。 - 位置：绝对；

这些解决方案均无效。

// HTML 代码 //

<div class="card">
  <input type="checkbox" name="">
     <div class="toggle">+</div>
        <div class="imgBox"> </div>
           <div class="content"> </div>
               <div class="details"> 

                 <h2>A quick check on CSS</h2>
                 <p> Just doing a quick test on CSS</p>


             </div>
</div>

// CSS 代码 //

card {
    position: relative;
    width: 300px;
    height: 400px;
    background: #262626;
}

input, 
.toggle {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  border: none;
  outline: none;
  z-index: 10;
  }

  input {
  opacity: 0;
  }

.toggle {
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  transition: 0.5s;
  text-align: center;
  font-size: 36px;
  line-height: 40px;
  box-shadow: 0 0 0 0px #9c27b0;
  overflow: hidden;
   }

/* 当输入设置为检查时，出现切换 */

  input:checked ~ .toggle {

  box-shadow: 0 0 0 500px #9c27b0;

  transform: rotate(500);
  }

Answer 1

据我了解，您需要在.card 上使用overflow:hidden。请让我知道这是否是您要找的东西

.card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #262626;
  overflow: hidden;
}

input,
.toggle {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  border: none;
  outline: none;
  z-index: 10;
}

input {
  opacity: 0;
}

.toggle {
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  transition: 0.5s;
  text-align: center;
  font-size: 36px;
  line-height: 40px;
  box-shadow: 0 0 0 0px #9c27b0;
  overflow: hidden;
}

input:checked~.toggle {
  box-shadow: 0 0 0 300px #9c27b0;
  transform: rotate(500);
}

<div class="card">
  <input type="checkbox" name="">
  <div class="toggle">+</div>
  <div class="imgBox"> </div>
  <div class="content"> </div>
  <div class="details">

    <h2>A quick check on CSS</h2>
    <p> Just doing a quick test on CSS</p>


  </div>
</div>

Answer 2

这是你想要的吗？

card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #262626;
}

input,
.toggle {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  border: none;
  outline: none;
  z-index: 10;
}

input {
  opacity: 0;
}

.toggle {
  pointer-events: none;
  border-radius: 50%;
  background: #fff;
  transition: 0.5s;
  text-align: center;
  font-size: 36px;
  line-height: 40px;
  box-shadow: 0 0 0 0px #9c27b0;
  overflow: hidden;
}

input:checked~.toggle {
  box-shadow: 0 0 0 300px #9c27b0;
  transform: rotate(500deg);
  background-color: #9c27b0;
}

<div class="card">
  <input type="checkbox" name="">
  <div class="toggle">+</div>
  <div class="imgBox"> </div>
  <div class="content"> </div>
  <div class="details">

    <h2>A quick check on CSS</h2>
    <p> Just doing a quick test on CSS</p>


  </div>
</div>