input jest niewidoczny w hamburger menu

pytanie zadane 11 czerwca 2019 w HTML i CSS przez TomekN Początkujący (330 p.)
zmienione kategorie 11 czerwca 2019 przez Arkadiusz Waluk

Cześć,

Nie wiem dlaczego input class = "widoczny" nie jest widoczny. Podpowie ktoś?

<html>
<head>
    <style>
    #menuToggle
    {
      position: relative;
      top: -40px;
      left: 50px;
      z-index: 1;
    }
     
    #menuToggle input
    {
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;     
	  cursor: pointer;     
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */     
      -webkit-touch-callout: none;
    }
	
    #menuToggle span
    {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;     
      background: #cdcdcd;
      border-radius: 3px;     
      z-index: 1;     
      transform-origin: 4px 0px;     
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }
    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }
    #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
    }
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }
	
    #menu
    {
    background-color: 80D8ff;
    padding: 2px;
    border-color: ffff57; 
    border:solid;
      position: absolute;
      max-height:110px;
    min-height:110px;
    overflow:hidden;
      width: 100%;
      margin: 10px 0 0 -50px;
      padding-top: 10px;
     padding-left: 10px; 
      list-style-type: none;
      -webkit-font-smoothing: antialiased;  
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);     
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #menuToggle input:checked ~ ul
    {
      transform: none;
    }
	.widoczny
{
  border: 3px solid red;
	padding: 5px;
	margin:red;
	 background-color: red; !important;
	 z-index: 3; !important;
	 width: 100px;
	 opacity: 1;
}


    </style>
     </head>
	 <body>
	 </br>
	 </br>
     
     
      <div id="menuToggle">
     
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
    	od:<input type = "text" class="widoczny" name ="from" id = "from" value ="Tralala"/>t
        </ul>
      </div>
</body>
</html>

Podpowie ktoś?