How to change a CSS checkbox label icon when checked WITHOUT JAVASCRIPT

Question

I have a hamburger menu with no javascript (I can't use it, that's the assignment) using a label icon from FontAwesome and I want the icon to change to another one when the checkbox is checked, I just have no idea how to do that. I've checked online and apparently it's not possible without JS but I rather ask just in case.

The icon is directly inside the label using class and I know i can add as many labels as I want and they're just gonna stack up, but I don't know how to hide/show one of them depending on the status of the checkbox or if there's another way:

<div id="hamburger">
    <img src="thelogo.png" alt="logo">
    <input type="checkbox" id="button">
    <label for="button" class="fas fa-bars"></label>
    <ul class="items">
        <li>EPISODES</li>
        <li>INTERVIEWS</li> 
        <li>ABOUT US</li>
    </ul>
</div>

Colin Bacon · Accepted Answer · 2020-01-03 05:32:31Z

6

To change the label icon when the checkbox is checked, use :before pseudo element.

Example

JsFiddle

html

<input type="checkbox" id="button">
<label for="button" class="fas"></label>

css

#button {
  display: none;
}

#button + label:before {
  content: "\f0c9"; 
}

#button:checked + label:before {
  content: "\f0aa"; 
}

answered Jan 3, 2020 at 5:32

Colin Bacon

15.6k8 gold badges56 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2020-01-03 14:59:54Z

4

You could use multiple icons and show/hide whichever you want.

<input type="checkbox" id="button">
<label for="button" class="fas fa-bars"></label>
<label for="button" class="fas arrow-circle-up"></label>

#button:checked ~ .fa-bars {
   display: none;
}

#button:checked ~ .arrow-circle-up {
   display: inline-block;
}

Or a more elegant way would be to update the content of the icon code.

#button ~ label::before {
  content: '\f0c9'; // bars code
}

#button:checked ~ label::before {
  content: '\f0aa'; // arrow up code
}

Heres a cheatsheet of all the icon codes

edited Jan 3, 2020 at 14:59

answered Jan 3, 2020 at 2:25

Mark

2,0711 gold badge16 silver badges26 bronze badges

2 Comments

Nabucco Over a year ago

Worked like a charm. Thank you so much!

Mark Over a year ago

No problem @Nabucco, don't forget to mark as the correct answer.

Bdloul · Accepted Answer · 2020-01-03 00:55:49Z

1

Use the pseudo class :checked : https://css-tricks.com/almanac/selectors/c/checked/

Example :

#button:checked + label {
   background : red;
}

#button:checked + label {
   background : blue;
}

That will change the background of your label when the checkbox is checked or not

answered Jan 3, 2020 at 0:55

Bdloul

90210 silver badges28 bronze badges

1 Comment

Nabucco Over a year ago

I'm actually using :checked already on the collapsible action but I'm not sure how to use it to change the label icons, particularly because they come from FontAwesome and not a local file

Avin A Good-time Chadee · Accepted Answer · 2021-03-06 15:21:12Z

1

If you are using React you can simply do this:

        <span>
          <Input type="checkbox" id="button" checked={isChecked} onChange={handleChange}/>
          {isChecked ? <FontAwesomeIcon icon={faCheckSquare} /> : <FontAwesomeIcon icon={faSquare} /> }
          {value}
        </span>

answered Mar 6, 2021 at 15:21

Avin A Good-time Chadee

3553 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to change a CSS checkbox label icon when checked WITHOUT JAVASCRIPT

4 Answers 4

Example

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Example

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related