+ 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']

6th Mar 2017, 4:53 AM
Saumya
Saumya - avatar
11 Answers
+ 9
Example of simple custom implementation of pure CSS drop-down checkbox list: https://code.sololearn.com/Wjry59v8OXnv/#css
7th Mar 2017, 3:00 PM
visph
visph - avatar
+ 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 ;)
7th Mar 2017, 10:47 AM
visph
visph - avatar
+ 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?
7th Mar 2017, 12:51 PM
Saumya
Saumya - avatar
+ 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.
7th Mar 2017, 3:23 PM
Saumya
Saumya - avatar
+ 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 ;) )
7th Mar 2017, 3:28 PM
visph
visph - avatar
+ 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.
7th Mar 2017, 3:37 PM
Saumya
Saumya - avatar
+ 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 ;)
7th Mar 2017, 3:15 PM
visph
visph - avatar
+ 2
have you tried the <select> tag with <option> tag inside it?
6th Mar 2017, 6:08 AM
Dinh Phuc Tran
Dinh Phuc Tran - avatar
+ 1
oh. So I think you could try <ul> and <li> tag with input type check box inside the <li>. quite complex though
7th Mar 2017, 3:10 PM
Dinh Phuc Tran
Dinh Phuc Tran - avatar
+ 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
7th Mar 2017, 3:20 PM
Dinh Phuc Tran
Dinh Phuc Tran - avatar
+ 1
@Saumya anytime :D
7th Mar 2017, 3:24 PM
Dinh Phuc Tran
Dinh Phuc Tran - avatar