时间戳

首页 > 解决方案 > CSS，HTML - 在检查输入时需要帮助更改子元素的文本并更改图标

html - CSS，HTML - 在检查输入时需要帮助更改子元素的文本并更改图标

问题描述

样式几乎完成了，但我还有一个问题。css 现在所做的是，它更改文本并更改图标，但将图标放在文本顶部，因为文本使用position: absolute.

如何将图标保持在原位？

.an_radio input:checked+span+i:before {
  position: relative;
  content: "\f00c" !important;
}

.an_radio input:checked+span:before {
  content: "toegevoegd";
  visibility: visible;
}

.an_radio input:checked+span {
  position: absolute;
  visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<div class="radio-inline an_radio" style="display: inline-block;">
  <label class="top" style="min-width: 7px">
    <input type="checkbox">
    <span>voeg toe</span>
    <i class="fas fa-shopping-cart"></i>
  </label>
</div>

标签： htmlcss

解决方案

更改一些 HTML

.an_radio input+span b {
  font-weight: normal
}

.an_radio input:checked+span b {
  display: none;
}

.an_radio input:checked+span:before {
  content: "toegevoegd";
  visibility: visible;
}

.an_radio input:checked+span i:before {
  content: "\f00c" !important;
  visibility: visible;
  position: relative;
}

.an_radio input:checked+span {
  position: absolute;
  visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />

<div class="radio-inline an_radio" style="display: inline-block;">
  <label class="top" style="min-width: 7px">
    <input type="checkbox" name="an_productfields_1[]" id="an_productfields_1_0" value="Basis servicepakket" class="Basis servicepakket" data-price="0" data-pricemain="0">
    <span>
      <b>voeg toe</b> <!-- Change Here -->
      <i class="fas fa-shopping-cart"></i> <!-- Change Here -->
    </span>

  </label>
</div>

推荐阅读