Custom Dropdown List

Developer
Emily Hayman
Size
4,266 Kb
Views
93,104
  1. Custom Dropdown List Previews
  2. Custom Dropdown List HTML Codes
  3. Custom Dropdown List CSS Codes
  4. Custom Dropdown List JS Codes

How do I make an custom dropdown list?

Custom dropdown using the :checked selector; minimal JS to toggle an "active" class when clicked. Background image switched on input selection.. What is a custom dropdown list? How do you make a custom dropdown list? This script and codes were developed by Emily Hayman on 14 June 2022, Tuesday.

Custom Dropdown List Previews
IQ Test

Custom Dropdown List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Dropdown List</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Montserrat'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="custom-dropdown" id="customDropdown"> <input type="radio" id="cityscape" name="dropdown" class="custom-input" checked /> <label for="cityscape">Cityscape</label> <input type="radio" id="bus" name="dropdown" class="custom-input" /> <label for="bus">VW Bus</label> <input type="radio" id="cactus" name="dropdown" class="custom-input" /> <label for="cactus">Cactus</label>
</div>
<div id="customBackground">
</div> <script src="js/index.js"></script>
</body>
</html>

Custom Dropdown List - Script Codes CSS Codes

html,
body { height: 100%; margin: 0; padding: 0;
}
*,
*:before,
*:after { box-sizing: border-box;
}
[id=customBackground] { background-image: url("http://s7.postimg.org/6q2osq2t7/filter_1.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; height: 100%; -webkit-transition: background-image .55s; transition: background-image .55s;
}
[id=customBackground]:after { content: ""; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; position: fixed; background-color: #000; visibility: hidden; opacity: 0; -webkit-transition: opacity .25s ease-in; transition: opacity .25s ease-in; will-change: opacity;
}
[id=customBackground].cityscape { background-image: url("http://s7.postimg.org/6q2osq2t7/filter_1.jpg");
}
[id=customBackground].bus { background-image: url("http://s29.postimg.org/a351qju6f/filter_2.jpg");
}
[id=customBackground].cactus { background-image: url("http://s23.postimg.org/og1paqupn/filter_3.jpg");
}
.custom-dropdown { position: absolute; cursor: pointer; min-width: 400px; margin-top: -41px; left: 50%; top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10;
}
.custom-dropdown.active input[type=radio] + label { visibility: visible; opacity: 1; height: auto;
}
.custom-dropdown:not(.active) input[type=radio]:not(:checked) + label { visibility: hidden; opacity: 0; height: 0; padding: 0; margin: 0;
}
.custom-dropdown input[type=radio] { display: none; pointer-events: none;
}
.custom-dropdown input[type=radio]:checked + label { z-index: 10;
}
.custom-dropdown label { cursor: pointer; position: relative; display: block; background-color: #fff; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity;
}
.custom-dropdown:after { content: "\f078"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; ext-align: center; padding: 16px 19px 15px 19px; border-left: 1px dotted #ccc; position: absolute; top: 14px; height: 42px; right: 0; font-size: .9em; z-index: 10; color: #B4B4B4; -webkit-transition: none; transition: none; pointer-events: none;
}
.custom-dropdown label { font-family: 'Montserrat', sans-serif; color: #7a7a7a; letter-spacing: .1em; text-transform: uppercase; font-size: 1.4em; padding: 22px 26px; margin-bottom: 10px;
}
.custom-dropdown.active:after { visibility: hidden;
}
.custom-dropdown.active input[type=radio]:checked + label { color: #000;
}
.custom-dropdown.active input[type=radio]:checked + label:hover { color: #fff;
}
.custom-dropdown.active label:hover { background-color: #000; color: #fff;
}
.custom-dropdown.active + [id=customBackground] { -webkit-filter: blur(3px); filter: blur(3px);
}
.custom-dropdown.active + [id=customBackground]:after { visibility: visible; opacity: .5;
}

Custom Dropdown List - Script Codes JS Codes

(function() { var customBackground = document.getElementById("customBackground"); function addDropdownClass(e) { var target = e.target; if (target) { if (target.nodeName.toLowerCase() === "label") { target.parentElement.classList.toggle("active"); } } } function toggleBackgroundClass(e) { var target = e.target; if (target) { var backgroundClass = target.getAttribute("id"); if (customBackground) { customBackground.className = backgroundClass; } } } var customDropdown = document.getElementById("customDropdown"); if (customDropdown) { customDropdown.addEventListener("click", addDropdownClass); } var customInputs = document.getElementsByClassName("custom-input"); if (customInputs) { Array.prototype.forEach.call(customInputs, function(el, i) { el.addEventListener("change", toggleBackgroundClass); }); }
})();
Custom Dropdown List - Script Codes
Custom Dropdown List - Script Codes
Home Page Home
Developer Emily Hayman
Username eehayman
Uploaded June 14, 2022
Rating 4
Size 4,266 Kb
Views 93,104
Do you need developer help for Custom Dropdown List?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily Hayman (eehayman) Script Codes
Name
A Pen by Emily Hayman
Single Div Apple Mouse
SVG Stroke Animation - Origami Crane
Slider Animation Effect
Full Page Parallax Scroll Effect
The Rhetoric of Donald Trump - A Data Visualization
CSS Variable-Powered Clock
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!