+ 7
How to include check boxes inside drop down list in html?
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']
11 Answers
+ 9
Example of simple custom implementation of pure CSS drop-down checkbox list:
https://code.sololearn.com/Wjry59v8OXnv/#css
+ 9
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 ;)
+ 8
@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?
+ 6
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.
+ 6
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 ;) )
+ 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.
+ 5
@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 ;)
+ 2
have you tried the <select> tag with <option> tag inside it?
+ 1
oh. So I think you could try <ul> and <li> tag with input type check box inside the <li>. quite complex though
+ 1
@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
+ 1
@Saumya anytime :D