-
-
-
.custom-select {
position: relative;
width: 100%;
max-width: 100%;
font-size: 14px;
color: #000;
font-family:"Century-Gothic-Regular";
}
.select-button {
width: 100%;
font-size: 14px;
background-color: #8A796F;
color:#fff;
padding: 5px 1em;
border: none;
border-radius: 0px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family:"Century-Gothic-Regular";
margin-top:10px;
margin-bottom:10px;
height:30px;
}
.selected-value {
text-align: left;
}
.arrow {
padding-right:3px;
padding-top: 3px;
height:20px;
width:20px
display:inline-block;
transition: transform ease-in-out 0.3s;
}
.select-dropdown {
position: absolute;
list-style: none;
width: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
background-color: #8A796F !important;
color:#fff;
border: none;
border-radius: 0px;
padding: 0px 5px;
margin-top: -10px;
max-height: 200px;
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
z-index:2;
}
.select-dropdown:focus-within {
box-shadow: 0 10px 25px rgba(94, 108, 233, 0.6);
}
.select-dropdown li {
position: relative;
cursor: pointer;
display: flex;
gap: 1rem;
align-items: center;
}
.select-dropdown li label {
width: 100%;
padding: 5px 10px;
cursor: pointer;
display: flex;
gap: 1rem;
align-items: center;
border-style:solid;
border-color:#bdb9b6;
border-width:0px 0px 2px 0px;
}
.select-dropdown::-webkit-scrollbar {
width: 7px;
}
.select-dropdown::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 25px;
}
.select-dropdown::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 25px;
}
.select-dropdown li:hover,
.select-dropdown input:checked ~ label {
background-color: #f2f2f2;
}
.select-dropdown input:focus ~ label {
background-color: #dfdfdf;
}
.select-dropdown input[type="radio"] {
position: absolute;
left: 0;
opacity: 0;
}
/* interactivity */
.custom-select.active .arrow {
transform: rotate(180deg);
}
.custom-select.active .select-dropdown {
height: 106px; /* Ändere dies auf die gewünschte Höhe */
opacity: 1;
visibility: visible;
}
const customSelect = document.querySelector(".custom-select");
const selectBtn = document.querySelector(".select-button");
const selectedValue = document.querySelector(".selected-value");
const optionsList = document.querySelectorAll(".select-dropdown li");
// add click event to select button
selectBtn.addEventListener("click", () => {
// add/remove active class on the container element
customSelect.classList.toggle("active");
// update the aria-expanded attribute based on the current state
selectBtn.setAttribute(
"aria-expanded",
selectBtn.getAttribute("aria-expanded") === "true" ? "false" : "true"
);
});
optionsList.forEach((option) => {
function handler(e) {
// Click Events
if (e.type === "click" && e.clientX !== 0 && e.clientY !== 0) {
selectedValue.textContent = this.children[1].textContent;
customSelect.classList.remove("active");
submitForm(); // Aufruf der submitForm() bei Klick auf ein Listenelement
}
// Key Events
if (e.key === "Enter") {
selectedValue.textContent = this.textContent;
customSelect.classList.remove("active");
submitForm(); // Aufruf der submitForm() bei Enter-Taste
}
}
option.addEventListener("keyup", handler);
option.addEventListener("click", handler);
});
function submitForm() {
var span_Text = document.getElementById("selected-value").innerText;
document.getElementById('auswahl').value = span_Text;
}
