Select with checkboxes and number input

HTML & CSS
1

I want to create a select with each option having a checkbox to the left and a number input to the right of the option text.
This is what I have so far

<div class="panel">
                <div id="Scripts">
                    <div id="Dropdown">
                        <div class="multipleSelection">
                            <div class="selectBox" onclick="showCheckboxes()">
                                <select>
                                    <option>Select options</option>
                                </select>
                                <div class="overSelect"></div>
                            </div>
                            <div id="checkBoxes">
                                <label for="first">
                                    <input type="checkbox" id="first" style="height: 20px; width: 20px;"/>
                                    checkBox1
                                    <input type="number" name="first" id="" style="width: 40px;">
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS

#Scripts{
    height: 200px;
    width: 100%;
    border: solid;
  }

  #Dropdown{
    height: 50px;
    width: 15%;
    border: solid;
  }

  .multipleSelection {
    width: 100%;
    background-color: #BCC2C1;
}

.selectBox {
    position: relative;
}

.selectBox select {
    width: 100%;
    font-weight: bold;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkBoxes {
    display: none;
    border: 1px #8DF5E4 solid;
}

#checkBoxes label {
    display: block;
}

#checkBoxes label:hover {
    background-color: #4F615E;
    color: white;
    /* Added text color for better visibility */
}

Any help appreciated.

2

I suggest use of a <dialog> element as here:

1 Like
3

@Archibald has probably given the best solution but in the interests of diversity :slight_smile: you could use the details and summary elements and avoid the need for JS.

This is just rough:

Works in modern browsers (not ie11).

As an aside you are not allowed in html to nest two inputs inside one label. If you try and validate the code it will explain the reasons why. I believe that some browsers will not allow the second input to work because a click on the label should activate the first descendant input and thus the second on could be unreachable.

1 Like
4

@PaulOB: What are you going to do with the state of the checkboxes and numeric input values if a site visitor has JavaScript disabled? I think your <details> element is going to need to contain a <form> element.

1 Like
5

Yes I assumed it was just part of a bigger form which is why I didn’t include a form tag inside.

I was just treating it like a fieldset and when the whole form is posted the values will get passed.

Of course if there is a different use case then some other method may be required. :slight_smile:

6

Here is how you can create it
Html:

Select options
checkBox1 checkBox2

css:
scripts {
height: 200px;
width: 100%;
border: solid;
}

#Dropdown {
height: 50px;
width: 15%;
border: solid;
}

.multipleSelection {
width: 100%;
background-color: #BCC2C1;
position: relative;
}

.selectBox {
position: relative;
cursor: pointer;
}

.selectBox .selectText {
width: 100%;
font-weight: bold;
padding: 5px;
box-sizing: border-box;
border: 1px solid #000;
background-color: #fff;
}

.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#checkBoxes {
display: none;
border: 1px #8DF5E4 solid;
position: absolute;
background-color: #fff;
width: 100%;
box-sizing: border-box;
z-index: 1;
}

#checkBoxes label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
border-bottom: 1px solid #ccc;
}

#checkBoxes label:hover {
background-color: #4F615E;
color: white;
}
Js:
function showCheckboxes() {
var checkBoxes = document.getElementById(“checkBoxes”);
if (checkBoxes.style.display === “none”) {
checkBoxes.style.display = “block”;
} else {
checkBoxes.style.display = “none”;
}
}
Here is how it looks:
select-with-checkbox-and-num-field

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.