Стилизация почти завершена, но у меня осталась еще одна проблема. Что делает 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>
0
Avion 28 Янв 2020 в 13:34

3 ответа

Лучший ответ

Вы также можете поиграть с display: none, если переставите свой html:

#checkedText {
  display: none;
}

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

.an_radio input:checked~#checkedText {
  display: inline;
}

.an_radio input:checked~#uncheckedText {
  display: none;
}
<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 id="uncheckedText">voeg toe</span>
    <span id="checkedText">toegevoegd</span>
    <i class="fas fa-shopping-cart"></i>
  </label>
</div>
1
johannchopin 28 Янв 2020 в 10:56

Почему мы пишем сложный код, если мы можем сделать это с помощью нескольких строк CSS.

.an_radio input:checked+strong+i:before {  
  content: "\f00c" !important;
}
.an_radio input:checked+strong:after {
  content: "toegevoegd"; 
}
.an_radio input:checked+strong>span { 
  display: none;
}
<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">
    <strong> <span>abcd</span></strong>
    <i class="fas fa-shopping-cart"></i>
  </label>
</div>
1
Sourav Singh 28 Янв 2020 в 11:31

Изменить некоторые 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>
2
Turnip 28 Янв 2020 в 10:52