Custom Select Box'a link ekleme

KardanAdamYi · 1 Ocak 2022

YouTube'dan yardım alarak bir custom select box yaptım ancak seçeneklere link eklediğimde seçenek seçmek için bastığım zaman direkt link açıyor. Bunu nasıl düzeltebilirim?

[CODE lang="html" title="HTML"]<div class="container">
<h2>Select Season</h2>

<div class="select-box">
<link rel="stylesheet" href="css/selector style.css"/>
<div class="options-container">

<div class="option">
<input type="radio" class="radio" id="All Time" name="category" />
<label for="All Time">All Time</label>
</div>

<div class="option">
<input type="radio" class="radio" id="2021-2022" name="category" />
<label for="2021-2022">2021-2022</label>
</div>

<div class="option">
<input type="radio" class="radio" id="2020-2021" name="category" />
<label for="2020-2021">2020-2021</label>
</div>

<div class="option">
<input type="radio" class="radio" id="2019-2020" name="category" />
<label for="2019-2020">2019-2020</label>
</div>[/CODE]
[CODE lang="css" title="css"]-* {
margin: 0;
box-sizing: border-box;
}

body {
font-family: "Roboto", sans-serif;
background: #f7f6ff;
}

h2 {
margin: 16px;
}

.container {
margin-top: 10px;
margin-left: 46px;
padding: 32px;
}

.select-box {
display: flex;
width: 400px;
flex-direction: column;
}

.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;

order: 1;
}

.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;

order: 0;
}

.selected::after {
content: "";
background: url("arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;

position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;

transition: all 0.4s;
}

.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
}

.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}

.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}

.select-box .option:hover {
background: #414b57;
}

.select-box label {
cursor: pointer;
}

.select-box .option .radio {
display: none;
}
[/CODE]

[CODE lang="javascript" title="JS"]const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});

optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML = o.querySelector("label").innerHTML;
o.querySelector("input").checked = true; //line that selects the radio button when the div is clicked
optionsContainer.classList.remove("active");
});
});[/CODE]

Rosalind · 23 Şubat 2022

Stil dosyasına pointer-events: none özelliğini ekleyebilirsiniz.

HTML:

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <input type='radio' id='an-Option'>
    <label for='an-Option'>
        <a href='https://www.google.com'>To Google</a>
    </label>
</body>
</html>

Custom Select Box'a link ekleme

Ayrıntılı düzenleme

KardanAdamYi

Centipat

Rosalind

Centipat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz