css 在div内添加其他输入元素后，复选框消失

u2nhd7ah 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(172)

我有一个使用伪元素样式的复选框。它是使用下面的html代码预期的工作。图像也添加供参考。但当我添加另一个输入元素后，第一个输入元素，复选框圆圈消失。额外的输入元素是由webserver在运行时添加，所以它无法避免。我不知道如何修复它。有人能请抛一些光。

工作代码

<div class="fgt-sec">
  <input type="checkbox" name="cc" id="c2" />
  <label for="c2">
    <span></span>
  </label>
  <small>Yes, I understand and agree to the Terms & Conditions.</small>
</div>
                   <div class="checky-sec">
                    <div class="fgt-sec">
                        <input type="checkbox" name="cc" id="c1">
                        <label for="c1">
                            <span></span>
                        </label>
                        <small>Remember me</small>
                    </div><!--fgt-sec end-->
                    <a href="#" title="">Forgot Password?</a>
                </div>

添加附加html输入元素后，HTML代码无法正常工作

<div class="fgt-sec">
  <input type="checkbox" name="cc" id="c2" />
  <input type="hidden" name="test" />
  <label for="c2">
    <span></span>
  </label>
  <small>Yes, I understand and agree to the Terms & Conditions.</small>
</div>

圆圈消失

CSS代码

.fgt-sec {
        float: left;
      }
      .fgt-sec input[type="checkbox"] {
        display: none;
      }
      .fgt-sec label {
        float: left;
      }
      .fgt-sec input[type="checkbox"] ~ label span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: relative;
        border:1px solid #d2d2d2;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        -o-border-radius: 100px;
        border-radius: 100px;
      }
      .fgt-sec input[type="checkbox"] ~ label span:before {
        content: '';
        width: 7px;
        height: 7px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        -o-border-radius: 100px;
        border-radius: 100px;
        font-size: 8px;
        color: #ffffff;
        opacity: 0;
        visibility: hidden;
        background-color: #e44d3a;
        position: absolute;
        font-family: fontawesome;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
      }
      .fgt-sec input[type="checkbox"]:checked ~ label span:before {
        opacity: 1;
        visibility: visible;
      }
      .fgt-sec small {
        float: left;
        color: #000000;
        font-size: 14px;
        font-weight: 500;
        margin-left: 10px;
      }
      .checky-sec > a {
        float: right;
        color: #000000;
        font-size: 14px;
        font-weight: 500;
      }
      
      /* ======= Radio Button Styles ======= */
      
      .fgt-sec input[type="radio"] {
        display: none;
      }
      .fgt-sec ~ label {
        float: left;
      }
      .fgt-sec input[type="radio"] ~ label span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: relative;
        border:1px solid #d2d2d2;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        -o-border-radius: 100px;
        border-radius: 100px;
      }
      .fgt-sec input[type="radio"] ~ label span:before {
        content: '';
        width: 7px;
        height: 7px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        -o-border-radius: 100px;
        border-radius: 100px;
        font-size: 8px;
        color: #ffffff;
        opacity: 0;
        visibility: hidden;
        background-color: #e44d3a;
        position: absolute;
        font-family: fontawesome;
        top: 49%;
        left: 49%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
      }
      .fgt-sec input[type="radio"]:checked ~ label span:before {
        opacity: 1;
        visibility: visible;
      }

css

来源：https://stackoverflow.com/questions/74779617/checkbox-disappears-after-adding-additional-input-element-inside-div

1条答案

按热度按时间

z0qdvdin1#

更新

看来更新的代码至少在这个codepen中工作，所以在实际项目中可能有一些其他的样式覆盖了正确的样式。
不确定可能是什么原因，但应要求，下面是pseudo元素在nut shell中发布的代码中的工作方式：
1.使用以下代码隐藏实际的input：

.fgt-sec input[type="checkbox"] {
  display: none;
}

1.空的复选圈是label中的一个样式化的span，代码如下：因为这个label已经为input设置了for，所以点击它会使input被选中或取消选中（就像点击input一样）。
x一个一个一个一个x一个一个二个x
1.“橙子dot”是所述span的样式化::before伪元素（发布的代码使用简写:before），它开始时不可见，如以下代码所定义：

.fgt-sec input[type="checkbox"] ~ label span:before {
  content: "";
  width: 7px;
  height: 7px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  font-size: 8px;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  background-color: #e44d3a;
  position: absolute;
  font-family: fontawesome;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

1.当输入具有:checked状态时，通过以下代码将所述::before伪元素设置为可见（以便显示“橙子点”）：

.fgt-sec input[type="checkbox"]:checked ~ label span:before {
  opacity: 1;
  visibility: visible;
}

有关更多详细信息，请考虑查看MDN页面中的CSS selectors和::before。
希望这可以帮助定位错误。

原件

看起来这是因为label的样式设置为原始input的下一个相邻元素。由于伪元素还依赖于label上的样式，因此当label的样式设置不正确时，伪元素将消失。
如果在label之后添加额外的input，似乎可以正常工作：

<div class="fgt-sec">
  <input type="checkbox" name="cc" id="c2" />
  <label for="c2">
    <span></span>
  </label>
  <!-- 👇  Additional input moved to here  -->
  <input type="hidden" name="test" />
  <small>Yes, I understand and agree to the Terms & Conditions.</small>
</div>

或者，如果无法移动额外的input，请考虑将CSS中的组合符从+更改为~，以便它正确地定位label，如下例所示。
More about ~ combinator
示例：

.fgt-sec {
  float: left;
}
.fgt-sec input[type="checkbox"] {
  display: none;
}
.fgt-sec label {
  float: left;
}
/* 👇 Changed combinator to "~" here */
.fgt-sec input[type="checkbox"] ~ label span {
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
  border: 1px solid #d2d2d2;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
}
/* 👇 Changed combinator to "~" here */
.fgt-sec input[type="checkbox"] ~ label span:before {
  content: "";
  width: 7px;
  height: 7px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  font-size: 8px;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  background-color: #e44d3a;
  position: absolute;
  font-family: fontawesome;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
/* 👇 Changed combinator to "~" here */
.fgt-sec input[type="checkbox"]:checked ~ label span:before {
  opacity: 1;
  visibility: visible;
}
.fgt-sec small {
  float: left;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}
.checky-sec > a {
  float: right;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
}

<div class="fgt-sec">
  <input type="checkbox" name="cc" id="c2" />
  <input type="hidden" name="test" />
  <label for="c2">
    <span></span>
  </label>
  <small>Yes, I understand and agree to the Terms & Conditions.</small>
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css 在div内添加其他输入元素后，复选框消失

1条答案

相关问题

热门标签

最新问答