Question

我有一个主要职位：亲戚。
嵌套（输入复选框）位置：绝对。
选中此复选框时，内部div颜色将缩放为500px。问题是颜色会溅出其主要颜色。
这是复选框边框从主方框溢出的屏幕截图。 https://pasteboard.co/I7uA6am.jpg
我要做的是，当我们单击右下角的圆圈复选框时。该复选框的背景颜色将填满整个主体，即300px x 400px的矩形。在这种情况下，复选框边框几乎占据了整个屏幕，因为它设置为500px。

我尝试过 -Z索引 -将框阴影变换的宽度设置为主体的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 CODE //

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 {
  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>

Answer 2

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

.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>

输入时，嵌套的<div>边框不会留在主<div>内部：选中

2 个答案: