Dropdowns With Html Codes

Here we share Popular Dropdown with Html CSS and javascript Code. That will make you surprised/ You can add these Custom Codes to Your Blog Easily

Firstly You should add Dropdown Html code in your Blog and then use CSS code in the Custom CSS  section after that  Paste the Javascript code below the Html section 

Html Code For Dropdown

<div class="select-container">

        <div class="select">

            <input type="text" id="input" placeholder="select" onfocus="this.blur();">

        </div>

        <div class="option-container">

            <div class="option">

                <label> Html </label>

            </div>

            <div class="option">

                <label>CSS</label>

            </div>

            <div class="option">

                <label>JavaScript</label>

            </div>

            <div class="option">

                <label>Python</label>

            </div>

            <div class="option">

                <label>PHP</label>

            </div>

            <div class="option">

                <label>MySQL</label>

            </div>

        </div>

    </div>

CSS Code For Dropdown

* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    font-family: "Courier New";

}

body {

    background: #edeeff;

height: 100vh;

    display: flex;

justify-content: center;

align-items: center

}

.select-container {

    position: relative;

    margin: 0 auto;

    width: 400px;

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

}

.select-container .select {

    position: relative;

    background: #0f0e11;

    height: 60px;

}

.select-container .select::after {

    position: absolute;

    content: "";

    width: 15px;

    height: 15px;

    top: 50%;

    right: 15px;

    transform: translateY(-50%) rotate(45deg);

    border-bottom: 2px solid white;

    border-right: 2px solid white;

    cursor: pointer;

    transition: border-color 0.4s;

}

.select-container.active .select::after {

    border: none;

    border-left: 2px solid white;

    border-top: 2px solid white;

}

.select-container .select input {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 0 15px;

    background: none;

    outline: none;

    border: none;

    font-size: 1.4rem;

    color: white;

    cursor: pointer;

}

.select-container .option-container {

    position: relative;

    background: #6e6477;

    height: 0;

    overflow-y: scroll;

    transition: 0.4s;

}

.select-container.active .option-container {

    height: 240px;

}

.select-container .option-container::-webkit-scrollbar {

    border-left: 1px solid rgba(0, 0, 0, 0.2);

    width: 10px;

}

.select-container .option-container::-webkit-scrollbar-thumb {

    background: #0f0e11;

}

.select-container .option-container .option {

    position: relative;

    padding-left: 15px;

    height: 60px;

    border-top: 1px solid rgba(0, 0, 0, 0.3);

    cursor: pointer;

    display: flex;

    align-items: center;

    transition: 0.2s;

}

.select-container .option-container .option.selected {

    background: rgba(0, 0, 0, 0.5);

    pointer-events: none;

}

.select-container .option-container .option:hover {

    background: rgba(0, 0, 0, 0.2);

    padding-left: 20px;

}

.select-container .option-container .option label {

    font-size: 1.1rem;

    color: white;

    cursor: pointer;

}

JAVASCRIPT Code For Dropdown

let selectContainer = document.querySelector(".select-container");

let select = document.querySelector(".select");

let input = document.getElementById("input");

let options = document.querySelectorAll(".select-container .option");

select.onclick = () => {

    selectContainer.classList.toggle("active");

};

options.forEach((e) => {

    e.addEventListener("click", () => {

        input.value = e.innerText;

        selectContainer.classList.remove("active");

        options.forEach((e) => {

            e.classList.remove("selected");

        });

        e.classList.add("selected");

    });

});

Tags;

 How to add Dropdown menu

How to add Dropdown menu in Blogger 

Custom Dropdown code for Blogger