CSS, HTML - нужна помощь, чтобы изменить текст дочернего элемента при проверке ввода, а также изменить значок

Question

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

html css

0

Avion 28 Янв 2020 в 13:34

Answer 1

Вы также можете поиграть с 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

Answer 2

Почему мы пишем сложный код, если мы можем сделать это с помощью нескольких строк 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

Answer 3

Изменить некоторые 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

CSS, HTML - нужна помощь, чтобы изменить текст дочернего элемента при проверке ввода, а также изменить значок

3 ответа

Похожие вопросы

Новые вопросы

html