display: none does not work with checkbox css
Question
i have a problem, everything is working just fine, but display: none for checkbox is not, checkbox is still there I've tried to style it via html atribute(i know that it is not a good thing to do, but i was ready for any solution), it worked, but sliding in/out stopped working.... what should I do?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> * {padding:0; margin:0;} body { font-family:sans-serif; } a { text-decoration: none; color:#00a5cc; } li { list-style-type:none; } header { height : 50px; margin:auto; width : 100%; border-bottom:1px solid #EEE; } #brand { float:left; line-height:50px; color:#E5DAC0; font-size:25px; font-weight:bolder; } nav { width:100%; text-align:center; } nav a { display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC; } nav a:hover { background:#E5DAC0; color :#FFF; } nav li:last-child a { border-bottom:none; } /************************************************************** **************************************************************/ .menu{ width: 240px; height: 100%; position: absolute; background: #a9a1f3; left: -240px; trensition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .menu-icon{ padding: 10px 20px; background: #000000; color: #aa25e9; cursor:pointer; float:right; margin-top:4px; border-radius:5px; } } #menuToggle{ display: none; } #menuToggle:checked ~ .menu { position:absolute; left:0px; } </style> <body> <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label> <header> <div id="brand"> slide in out nav</div> </header> <nav class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">INSPIRATION</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </body> </html>
2 answers
solution1
2 ACCPTED 2016-09-29 03:12:33
You have an error in your css at .menu-icon it has an extra } , that's why it doesn't work.
Just by removing the extra } will work as expected.
Live example here: https://jsfiddle.net/ay84zjjw/
Hope this helps.
solution2
0 2016-09-29 03:15:26
just an little error, just a more } in your code.
.menu-icon{
padding: 10px 20px;
background: #000000;
color: #aa25e9;
cursor:pointer;
float:right;
margin-top:4px;
border-radius:5px; **}**
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> * {padding:0; margin:0;} body { font-family:sans-serif; } a { text-decoration: none; color:#00a5cc; } li { list-style-type:none; } header { height : 50px; margin:auto; width : 100%; border-bottom:1px solid #EEE; } #brand { float:left; line-height:50px; color:#E5DAC0; font-size:25px; font-weight:bolder; } nav { width:100%; text-align:center; } nav a { display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC; } nav a:hover { background:#E5DAC0; color :#FFF; } nav li:last-child a { border-bottom:none; } /************************************************************** **************************************************************/ .menu{ width: 240px; height: 100%; position: absolute; background: #a9a1f3; left: -240px; trensition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .menu-icon{ padding: 10px 20px; background: #000000; color: #aa25e9; cursor:pointer; float:right; margin-top:4px; border-radius:5px; } #menuToggle{ display: none; } #menuToggle:checked ~ .menu { position:absolute; left:0px; } </style> <body> <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label> <header> <div id="brand"> slide in out nav</div> </header> <nav class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">INSPIRATION</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Display none in CSS fade out does not work or hide the div
display = 'none' does not work in javascript
display:none does not work for label
This script display none does not work on chrome
Display none does not work on Microsoft Outlook App
Display none and block does not work via JavaScript
hide <tr> with style display:none does not work
Why does display:none not work here?
display:none does not work in IE for option tag
{display:none} not working with checkbox?
Related Tags