I am currently working on incorporating a Selectbox that includes checkboxes within the selectbox itself, similar to the image shown below. However, I am encountering an issue where clicking on the select box does not open the checkboxes from another div. I have attempted to use z-index but it is not producing the desired results.
https://i.sstatic.net/SGjRu.png
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
Below is the CSS styling:-
<style>
.multiselect {
width: 200px;
height: 20px;
}
.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 #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate
{
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 34px;
width: 240px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
width: 268px;
}