Please Login or Register to continue.


I am creating multiple checkboxes. I want to create scrolling on checkboxes. Now, I can create lots of checkboxes for that I need to scroll the whole page. This looks very weird. I don't want to scroll up or down the whole page for all checkboxes. I want to create scrolling on checkboxes. I want to like - I will scroll and down only checkbox in a limited height and width.

(4.3K Points)
in CSS


1 Answer
(3.4K Points)

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>

You can set height and width according to your need. Scrolling will apply under a given height and width on HTML checkboxes. 


Related Questions :-

Your Answer

You can post your answer after login..