How to include check boxes inside drop down list in html?

Question

I want to display a drop down list to the user, whose elements have check boxes to select it. But I am just a beginner in html, I know how to make them separately but not combined. So I need help.

[Edit: Changed 'combo boxes' to 'drop down list']

Answer 1

Example of simple custom implementation of pure CSS drop-down checkbox list:
https://code.sololearn.com/Wjry59v8OXnv/#css

Answer 2

What are you meaning by "combo box"?

If you think to alert/input/confirm JS boxes, you cannot customize them more than by parameters intented to these functions ( only a text content, and a default value for the input one )...

If you think to <select> html drop-down list element, as suggested by @Dinh Phuc Tran, with multi-selection ability, you need to use the 'multiple' attribute of it:

<select multiple>
<option>item</option>
<option>item</option>
<option>item</option>
</select>

... but it doesn't display check boxes, and it's poorly stylable ^^
So, else, you need to design/implement it by yourself, or search for some library/framework providing kind of ;)

Answer 3

@visph, Yes, I meant drop down list with check box elements. I know about using the multiple but as you have said, it doesn't show check boxes.
@Dinh, yes, yes that's how we make drop down list right?

Answer 4

Yes, the link outputs exactly what I want, but I guess I'll have to learn more for implementing that.
But thanks to both of you, I at least got some ideas how to accomplish it.

Answer 5

If you're begining learning html and css, as your course profile here suggest, you need to learn some more maybe. However that could be a good practice case to try to play with ( and an opportunity to dive into documentation... but feel free to ask for explanation when you stuck ;) )

Answer 6

@Visph, it is really a good opportunity.
I did understand the HTML codes as I know a little bit of HTML. Though I am learning CSS too on SoloLearn but I've not started yet. So for now, I don't understand the CSS part. Hope it'll be clear when I start learning CSS.

Answer 7

@Dinh Phuc Tran wrote: "I think you could try <ul> and <li> tag with input type check box inside the <li>. quite complex though"

This is the way of my simple solution :D
Look at it, it was not as complex as you could think at a first thinking ;)

Answer 8

have you tried the <select> tag with <option> tag inside it?

Answer 9

oh. So I think you could try <ul> and <li> tag with input type check box inside the <li>. quite complex though

Answer 10

@visph, oh the link. acutally I mean it is more complicated than using just the input tag and the properties. sorry for the mis-understanding :D

Answer 11

@Saumya anytime :D