html - How can I prevent the browser from scrolling on top of the page when clicking the checkbox? -
whenever click on checkbox, browser window (firefox) scroll on top of screen.
how can prevent behavior when click on checkbox browser window not scroll on top?
here code found here http://jsfiddle.net/zafnd/6/
thank you.
<html> <head> <title>test</title> <style> div label input { margin-right: 100px; } body { font-family:sans-serif; } #ck-button { margin: 4px; background-color: #efefef; border-radius: 4px; border: 1px solid #d0d0d0; overflow: auto; float: left; } #ck-button { margin: 4px; background-color: #efefef; border-radius: 4px; border: 1px solid #d0d0d0; overflow: auto; float: left; } #ck-button:hover { margin: 4px; background-color: #efefef; border-radius: 4px; border: 1px solid red; overflow: auto; float: left; color: red; } #ck-button label { float: left; width: 4.0em; } #ck-button label span { text-align: center; padding: 3px 0px; display: block; } #ck-button label input { position: absolute; top: -20px; } #ck-button input:checked + span { background-color: #911; color: #fff; } </style> </head> <body> <br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="ck-button"> <label> <input type="checkbox" value="1"><span>red</span> </label> </div> </body>
the problem rule:
#ck-button label input { position:absolute; top:-20px; } when click on label browser tries focus related input. in case checkbox element lying at top of page, on outside of viewport. firefox tries scroll there.
i think can solve adding:
#ck-button label { display: block; position: relative; overflow: hidden; } demo
edit
as came answer today , in regard of heisenberg's: points out problem can occur using extreme values , adds solution has same quirk mine.
to avoid possible quirks, here's possible solution hidding input. functionality not affected, can test in link below.
css
#ck-button label input { display: none; } demo
Comments
Post a Comment