Mon. Mar 27th, 2023

[ANSWERED] CSS, HTML – Need help to change the text of child element when input gets checked and also change the icon

By

Nov 20, 2022 css, html

Solution 1 :

Change Some 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>

Solution 2 :

You can also play with display: none if you rearrange your 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>

Solution 3 :

Why we write a complex code if we can do it with few lines of 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>

Problem :

The styling is almost complete, but I am still having one more problem. What the css does right now is, it changes the text and changes the icon but puts the icon on top of the text because the text gets changed using position: absolute.

How do I keep the icon in position?

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

Comments

Comment posted by Carl Binalla

you mean the position of the check must be the same as the cart?

Comment posted by Pete

just remove the position absolute on the span?

Comment posted by Rob

Note that the

Comment posted by stackoverflow.com/a/59947166/12434428

Do it with few line of code

Comment posted by Avion

Thank you so much, this did the job!

Comment posted by johannchopin

@Avion Not a problem 😉 Can you please

Comment posted by Avion

Done, I thought I had already done that but whatever. All good now 🙂

Comment posted by Avion

It adds spacing to the text, but it almost solved the problem.

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022