0

I am having a problem with my hamburger icon and checkbox input.

What I expect to happen is for the checkbox to be completely invisible but still be able to check it which will then trigger the transition where my hamburger icon forms into a cross with the middle span turning invisible.

What I need to fix:

  • Border around input when not checked.FIXED border: none & outline:none
  • Checkbox having a black background when checked. FIXED Upgraded mobile browsers and not occuring anymore.
  • Middle span staying visible. FIXED Solution I found was using different cross browser opacity stylings.

Here is the HTML:

<div class="menu-icon">
  <input type="checkbox" name="checkbox" value="">
   <span></span>
   <span></span>
   <span></span>
</div>

Here is the CSS:

.menu-icon input, .menu-icon input:checked {
  -webkit-appearance: none;
  -webkit-border-radius:0px;
  opacity: 0%;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 5;
}

.menu-icon span {
  transition: all 0.4s ease-in-out;
  margin-bottom: 10px;
  background: black;
  width: 40px;
  height: 3px;
  border-radius: 10px;
}

.menu-icon input:checked ~ span:first-of-type {
  transform: rotate(45deg) translate(9px, 9px);
}

.menu-icon input:checked ~ span:nth-child(3) {
  opacity: 0%;
}


.menu-icon input:checked ~ span:last-of-type {
  transform: rotate(-45deg) translate(10px, -10px);
}


.menu-icon span:last-of-type {
  margin-bottom: 0;
}

Pictures of what is happening: Before After

I have tried looking at previous posts and on google but I can't seem to find anything regarding my specific problem.

As you can see I've tried adding some webkits but to no success.

Thank you in advance.

ElGruffallo
  • 23
  • 3

1 Answers1

0

This fixes the 3 items in your list.

Basically all changes are in .menu-icon span css. I set display: block; and position: relative; to center the spans on the checkbox. Of course you may need to adjust positioning to fit your layout.

This is a clever use of css to animate and alter the styling of an icon. Not my design. I've seen it in use in the past.

.menu-icon input, .menu-icon input:checked {
  opacity: 0%;
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 4;
}

.menu-icon span {
  transition: all 0.4s ease-in-out;
  margin-bottom: 10px;
  background: black;
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 10px;
  position: relative;
  top: -44px;
  left: 8px;
}

.menu-icon input:checked ~ span:first-of-type {
  transform: rotate(45deg) translate(9px, 9px);
}

.menu-icon input:checked ~ span:nth-child(3) {
  opacity: 0%;
}


.menu-icon input:checked ~ span:last-of-type {
  transform: rotate(-45deg) translate(10px, -10px);
}


.menu-icon span:last-of-type {
  margin-bottom: 0;
}
<div class="menu-icon">
  <input type="checkbox" name="checkbox" value="">
   <span></span>
   <span></span>
   <span></span>
</div>

codepen

Rob Moll
  • 3,345
  • 2
  • 9
  • 15
  • This is the first time I've come across the tilde ~ in css. If you don't already know, it's called a "General sibling combinator". [Read all about it](https://stackoverflow.com/questions/15471382/what-does-symbol-tilde-mean-in-css). – Rob Moll Feb 06 '20 at 23:51
  • Thank you very much for your help but I don't think I made the problem very clear and I'm sorry for that. The issue I am having is its not giving the appropriate appearance on mobile. If I am misunderstanding the solution, I apologize. – ElGruffallo Feb 07 '20 at 22:08