Scrolling on multiple checkboxes can be implemented using CSS code. This is one of the best designs to arrange page content. The checkbox is used to insert data into the database. We can create multiple checkboxes for different values in HTML. Like - All Languages, Cities, Countries, etc Item in checkbox. These checkboxes can take up more space on the website page, but if we make a scrolling checkbox, it will be best for page content.Users can scroll up or down to check multiple checkboxes in HTML -
Let's create scrolling on HTML checkboxes using inline CSS -
<div style="overflow:hidden">
<div style='padding-left:1em; height:100px; max-width: 500px; border:2px solid #ccc; overflow-y: scroll; '>
<label>Hindi</label><input type="checkbox" name="language" value="Hindi"><br>
<label>English</label><input type="checkbox" name="language" value="English"><br>
<label>Franch</label><input type="checkbox" name="language" value="Franch"><br>
<label>Item 4</label><input type="checkbox" name="language" value="Item4"><br>
<label>Item 5</label><input type="checkbox" name="language" value="Item5"><br>
<label>Item 6</label><input type="checkbox" name="language" value="Item6"><br>
</div>
</div>
You can set height and width according to your need. Scrolling will apply under a given height and width on HTML checkboxes.