I want to change the styling of a dropdown with check boxes using only CSS and javascript.
My code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checklist sample</title>
<style>
.multiselect {
width: 200px;
}
.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;
}
</style>
<body>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Group</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" /> Boiler
</label>
<label for="two">
<input type="checkbox" id="two" /> Engine
</label>
<label for="three">
<input type="checkbox" id="three" /> Fan
</label>
<label for="one">
<input type="checkbox" id="one" /> Location
</label>
<label for="two">
<input type="checkbox" id="two" /> Ship
</label>
<label for="three">
<input type="checkbox" id="three" /> Valmarine
</label>
<label for="three">
<input type="checkbox" id="three" /> Voyage</label>
</div>
</div>
</form>
<script>
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
}
else {
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
</body>
</html>
For example I want to change the color of the dropdown button, the color of the box with the arrow on the right of the dropbox, the color of the checkboxes (dark grey) etc.. I am trying to make it as simple as possible using only CSS and javascript.
Aucun commentaire:
Enregistrer un commentaire