Sun. Dec 8th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

How to use Checkbox inside Select Option HTML JavaScript CSS Tutorial

1 min read



Hi guys, welcome back to Angga Risky, In this video, I want to show you about how to create the checkboxes inside of select option using HTML, CSS, and JavaScript.

So, check this out guys:

Follow Me ==========================================

facebook : @anggariskys
twitter: @anggariskys
google+: plus.google.com/+anggariskysetiawan
instagram: anggariskysetiawan
website: www.anggarisky.com
blog: www.anggarisky.com/en/blog

11 thoughts on “How to use Checkbox inside Select Option HTML JavaScript CSS Tutorial

  1. <style>

    .multi-select > div {

    margin-bottom: 0 !important;

    }

    .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>

    <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>

  2. P.s question: how to make JS be on top (drop down options) and do not move html elements and others div? because your example working but it moves others objects which is bellow this contraction. is there any solution?

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.