Skip to content

Instantly share code, notes, and snippets.

@dbasilioesp
Created February 6, 2019 17:31
Show Gist options
  • Save dbasilioesp/40cb872656a4a6d12b5ccfac96784447 to your computer and use it in GitHub Desktop.
Save dbasilioesp/40cb872656a4a6d12b5ccfac96784447 to your computer and use it in GitHub Desktop.
Select Custom
import { forEach } from "./utils/pollyfills";
export default function SelectCustom() {
let selects = document.querySelectorAll(".select-custom");
forEach(selects, selectsSet);
function selectsSet(select) {
// Creating the custom select
let selectInput = select.querySelector("select")
let options = selectInput.querySelectorAll('option');
let label = document.createElement("div");
label.classList.add("select-custom__label");
label.appendChild(document.createTextNode(options[0].textContent));
select.appendChild(label);
var optionsContainer = document.createElement("div");
optionsContainer.classList.add("select-custom__options");
let frag = document.createDocumentFragment();
forEach(options, function (option) {
let optionEl = document.createElement("div");
optionEl.classList.add("option");
optionEl.appendChild(document.createTextNode(option.textContent));
optionEl.setAttribute("value", option.value);
frag.append(optionEl);
});
optionsContainer.append(frag);
select.appendChild(optionsContainer);
// Adding events to custom select
let customOptions = optionsContainer.querySelectorAll('.option');
forEach(customOptions, optionsSet);
function optionsSet(option) {
option.addEventListener('click', function (event) {
event.stopPropagation();
selectInput.value = option.getAttribute("value");
label.textContent = option.textContent;
hideOptions()
});
}
select.addEventListener("click", () => {
optionsContainer.style.opacity = 1;
optionsContainer.style.zIndex = 1;
select.style.overflow = "visible";
});
document.addEventListener("click", function (event) {
// If user clicks inside the element, do nothing
if (event.target.closest(".select-custom")) return;
hideOptions();
});
function hideOptions() {
optionsContainer.style.opacity = 0;
optionsContainer.style.zIndex = -1;
select.style.overflow = "hidden";
}
}
}
.select-custom
select
option(value="2019") 2019
option(value="2020") 2020
option(value="2021") 2021
.select-custom {
position: relative;
width: auto;
height: 25px;
margin-bottom: 20px;
cursor: pointer;
select {
display: none;
}
.select-custom__label {
padding-right: 20px;
height: 100%;
border: none;
border-radius: 0;
border-bottom: 2px solid #2e343c;
background-color: transparent;
font-size: 14px;
font-weight: 300;
color: #fff;
position: relative;
&:before {
content: "";
position: absolute;
top: 5px;
right: 6px;
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
color: #fff;
border-top: 6px dashed;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
}
.select-custom__options {
padding: 8px 0;
background: white;
border-radius: 4px;
position: relative;
z-index: -1;
opacity: 0;
.option {
font-size: 14px;
line-height: 1.2;
padding: 4px 20px;
background-color: white;
color: $background-color;
cursor: pointer;
&:hover {
background-color: #d3dbe1;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment