为什么自定义下拉菜单在点击时无法打开？

Question

我为过滤器构建了这个自定义下拉列表，但由于某种原因，下拉列表没有下拉。.open正在附加到选择器。。。但我错过了一些东西。

//dropdown
let current_story = "",
current_year = "";
for (const dropdown of document.querySelectorAll(
".custom__select-wrapper:not(.clearFilter)"
)) {
dropdown.addEventListener("click", function () {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function () {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function (e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});

@charset "UTF-8";
body {
font-family: "motiva-sans" sans-serif;
font-size: 16px;
}
a:hover {
text-decoration: none;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.align-items-stretch {
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.mx-auto {
margin: 0 auto;
}
.icon-lg {
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-right: 0.5em;
}
.text-white {
color: white;
}
.email {
color: #005fec;
}
.italic {
font-style: italic;
}
.tt-normal {
text-transform: none;
}
.tt-uppercase {
text-transform: uppercase;
}
.fw-normal {
font-weight: 400;
}
.fw-bold {
font-weight: 700;
}
.fw-bolder {
font-weight: 800;
}
.fw-boldest {
font-weight: 900;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("woff2"),
url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("woff"),
url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("opentype");
font-style: normal;
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("woff2"),
url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("woff"),
url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("opentype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("woff2"),
url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("woff"),
url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("opentype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("woff2"),
url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("woff"),
url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("opentype");
font-style: normal;
font-weight: 800;
font-display: swap;
}
@media screen and (min-width: 320px) {
.news-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 30vh;
margin: 200px auto 10px;
}
.news-header .news-header__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: #005fec;
}
.news-header__title h6 {
font-weight: weight(bold);
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.news-header__slogan {
margin: 24px 0 16px;
}
.news-header__slogan h1 {
font-weight: weight(bold);
font-size: 40px;
line-height: 44px;
}
.news-header__subtitle h5 {
font-weight: weight(normal);
font-size: 24px;
line-height: 36px;
}
}
@media screen and (min-width: 768px) {
.news-header__article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 20vh;
margin: 150px auto 10px;
}
.news-header__content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 991px) {
.news-header__slogan h1 {
font-size: 60px;
line-height: 68px;
}
.news-header__subtitle h5 {
font-size: 28px;
line-height: 40px;
}
}
.filtered .article {
display: none;
}
.filtered .article.show {
display: block;
}
.no-cards {
background: #005fec;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.no-cards > h4 {
font-size: 24px;
line-height: 32px;
padding: 1em;
font-weight: 700;
}
.load-more-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 3em auto;
}
@media (min-width: 320px) {
.nextcard {
background: #ffffff;
color: #000a70;
padding: 40px 32px 32px;
-webkit-box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
border-radius: 4px;
-webkit-transition: -webkit-box-shadow 0.2s ease;
transition: -webkit-box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
margin: 20px 0;
cursor: default;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
}
.nextcard__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.nextcard__logo {
height: 80px;
width: 136px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nextcard__logo img {
width: 100%;
height: auto;
}
.nextcard__date {
color: #005fec;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
line-height: 12px;
margin: 6em 0 1em;
text-transform: uppercase;
}
.nextcard__title h4 {
color: #000a70;
font-size: 28px;
font-weight: 800;
line-height: 32px;
margin: 0 0 2em;
}
.nextcard__footer {
margin-top: auto;
}
.nextcard__icon {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 24px;
}
.nextcard__icon--spacer {
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.nextcard__icon:hover .nextcard__icon--spacer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media screen and (min-width: 1024px) {
.nextcard:hover {
-webkit-box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
}
.nextcard:hover .nextcard__content .nextcard__title h4 {
color: #005fec;
}
.nextcard--no-link:hover .nextcard__content .nextcard__title h4 {
color: #000a70;
}
.nextcard--no-link:hover {
-webkit-box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
.filter__settings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.custom__select-wrapper h6 {
padding: 0 3px;
color: #a1b4c4;
font-weight: 300;
}
.custom__select {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.custom__select-wrapper {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 20px 0;
}
.custom__select-trigger {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
position: absolute;
display: none;
background-color: #005fec;
top: 100%;
left: 0;
right: 0;
border-top: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom__options:before,
.custom__options:after {
content: "";
position: absolute;
bottom: 100%;
left: 11px;
border: 11px solid transparent;
border-bottom-color: #005fec;
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger,
.custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
width: 100%;
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 20px;
font-weight: 300;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-size: 12px;
line-height: 12px;
margin: 1.5em 0;
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #ffffff;
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
/* arrow */
.arrow {
position: relative;
height: 10px;
width: 10px;
margin-left: 2em;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.arrow::before {
left: -2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #394a6d;
}
.arrow::after {
left: 2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #394a6d;
}
.open .arrow::before {
left: -2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open .arrow::after {
left: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow::after {
left: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #394a6d;
}
.open .arrow::before {
left: -2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open .arrow::after {
left: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
.filter__settings {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.custom__select-trigger {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin-right: auto;
}
.filter__settings .custom__select-wrapper {
margin: 0 2em;
}
.custom__select-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.custom__select-wrapper:last-child {
margin-left: auto;
}
}
.hidden {
display: none !important;
}
.article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: none;
}

<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<h6>filter by</h6>
</div>
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector">
<div class="custom__select-trigger">
<h6>Story Type</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown story-selector" id="storyFilter">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
<span class="custom__option" data-type="press">Press Releases</span>
</div>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
<span class="custom__option" data-year="2019">2019</span>
<span class="custom__option" data-year="2018">2018</span>
<span class="custom__option" data-year="2017">2017</span>
<span class="custom__option" data-year="2016">2016</span>
<span class="custom__option" data-year="2015">2015</span>
<span class="custom__option" data-year="2014">2014</span>
<span class="custom__option" data-year="2013">2013</span>
<span class="custom__option" data-year="2012">2012</span>
<span class="custom__option" data-year="2011">2011</span>
<span class="custom__option" data-year="2010">2010</span>
<span class="custom__option" data-year="2009">2009</span>
<span class="custom__option" data-year="2008">2008</span>
<span class="custom__option" data-year="2007">2007</span>
<span class="custom__option" data-year="2006">2006</span>
</div>
</div>
</div>
<div class="custom__select-wrapper clearFilter">
<h6 class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</h6>
</div>
</div>
</section>

Answer 1

在.custom__options类中有display: none;。把它取下来。

//dropdown
let current_story = "",
current_year = "";
for (const dropdown of document.querySelectorAll(
".custom__select-wrapper:not(.clearFilter)"
)) {
dropdown.addEventListener("click", function () {
this.querySelector(".custom__select").classList.toggle("open");
});
}
for (const option of document.querySelectorAll(".custom__option")) {
option.addEventListener("click", function () {
if (!this.classList.contains("selected")) {
this.parentNode
.querySelector(".custom__option.selected")
.classList.remove("selected");
this.classList.add("selected");
this.closest(".custom__select").querySelector(
".custom__select-trigger h6"
).textContent = this.textContent;
if (this.getAttribute("data-year")) {
current_year = this.dataset["year"];
yearFilter(this.dataset["year"]);
} else {
current_story = this.dataset["type"];
storyFilter(this.dataset["type"]);
}
}
});
}
window.addEventListener("click", function (e) {
for (const select of document.querySelectorAll(".custom__select")) {
if (!select.contains(e.target)) {
select.classList.remove("open");
}
}
});

@charset "UTF-8";
body {
font-family: "motiva-sans" sans-serif;
font-size: 16px;
}
a:hover {
text-decoration: none;
}
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
.align-items-stretch {
-webkit-box-align: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.mx-auto {
margin: 0 auto;
}
.icon-lg {
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-right: 0.5em;
}
.text-white {
color: white;
}
.email {
color: #005fec;
}
.italic {
font-style: italic;
}
.tt-normal {
text-transform: none;
}
.tt-uppercase {
text-transform: uppercase;
}
.fw-normal {
font-weight: 400;
}
.fw-bold {
font-weight: 700;
}
.fw-bolder {
font-weight: 800;
}
.fw-boldest {
font-weight: 900;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("woff2"),
url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("woff"),
url("https://use.typekit.net/af/b996c1/00000000000000003b9b3552/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3")
format("opentype");
font-style: normal;
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("woff2"),
url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("woff"),
url("https://use.typekit.net/af/c1bab1/00000000000000003b9b354f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
format("opentype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("woff2"),
url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("woff"),
url("https://use.typekit.net/af/f499a5/00000000000000003b9b3555/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
format("opentype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "motiva-sans";
src: url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("woff2"),
url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("woff"),
url("https://use.typekit.net/af/218e23/00000000000000003b9b3553/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3")
format("opentype");
font-style: normal;
font-weight: 800;
font-display: swap;
}
@media screen and (min-width: 320px) {
.news-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 30vh;
margin: 200px auto 10px;
}
.news-header .news-header__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: #005fec;
}
.news-header__title h6 {
font-weight: weight(bold);
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.news-header__slogan {
margin: 24px 0 16px;
}
.news-header__slogan h1 {
font-weight: weight(bold);
font-size: 40px;
line-height: 44px;
}
.news-header__subtitle h5 {
font-weight: weight(normal);
font-size: 24px;
line-height: 36px;
}
}
@media screen and (min-width: 768px) {
.news-header__article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 20vh;
margin: 150px auto 10px;
}
.news-header__content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 991px) {
.news-header__slogan h1 {
font-size: 60px;
line-height: 68px;
}
.news-header__subtitle h5 {
font-size: 28px;
line-height: 40px;
}
}
.filtered .article {
display: none;
}
.filtered .article.show {
display: block;
}
.no-cards {
background: #005fec;
border-radius: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.no-cards > h4 {
font-size: 24px;
line-height: 32px;
padding: 1em;
font-weight: 700;
}
.load-more-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 3em auto;
}
@media (min-width: 320px) {
.nextcard {
background: #ffffff;
color: #000a70;
padding: 40px 32px 32px;
-webkit-box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
border-radius: 4px;
-webkit-transition: -webkit-box-shadow 0.2s ease;
transition: -webkit-box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
margin: 20px 0;
cursor: default;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
}
.nextcard__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.nextcard__logo {
height: 80px;
width: 136px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nextcard__logo img {
width: 100%;
height: auto;
}
.nextcard__date {
color: #005fec;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
line-height: 12px;
margin: 6em 0 1em;
text-transform: uppercase;
}
.nextcard__title h4 {
color: #000a70;
font-size: 28px;
font-weight: 800;
line-height: 32px;
margin: 0 0 2em;
}
.nextcard__footer {
margin-top: auto;
}
.nextcard__icon {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 24px;
}
.nextcard__icon--spacer {
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.nextcard__icon:hover .nextcard__icon--spacer {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media screen and (min-width: 1024px) {
.nextcard:hover {
-webkit-box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
}
.nextcard:hover .nextcard__content .nextcard__title h4 {
color: #005fec;
}
.nextcard--no-link:hover .nextcard__content .nextcard__title h4 {
color: #000a70;
}
.nextcard--no-link:hover {
-webkit-box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
}
}
button.clear {
border: 0;
background: #fff;
}
#selectedFilter {
color: #005fec;
}
.filter__settings {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.custom__select-wrapper h6 {
padding: 0 3px;
color: #a1b4c4;
font-weight: 300;
}
.custom__select {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.custom__select-wrapper {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 20px 0;
}
.custom__select-trigger {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.custom__select-wrapper h6,
.custom__select-trigger h6 {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.custom__select-trigger h6 {
color: #005fec;
font-weight: 900;
}
.custom__select-wrapper #selectedFilter {
font-size: 12px;
line-height: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #005fec;
font-weight: 800;
padding: 0;
}
.custom__options {
position: absolute;
/*  display: none; */
background-color: #005fec;
top: 100%;
left: 0;
right: 0;
border-top: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom__options:before,
.custom__options:after {
content: "";
position: absolute;
bottom: 100%;
left: 11px;
border: 11px solid transparent;
border-bottom-color: #005fec;
}
.custom__options.active {
display: block;
visibility: visible;
opacity: 1;
z-index: 10;
}
.custom__select-trigger,
.custom__option {
letter-spacing: 1px;
font-weight: 800;
color: #005fec;
border: 0;
background: transparent;
}
.custom__select.open .custom__options {
opacity: 1;
visibility: visible;
pointer-events: all;
color: #fff;
width: 100%;
}
.custom__option {
position: relative;
display: block;
padding: 0 22px 0 20px;
font-weight: 300;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-size: 12px;
line-height: 12px;
margin: 1.5em 0;
}
.custom__option:hover {
cursor: pointer;
}
.custom__option.selected {
color: #ffffff;
}
.custom__option.selected::before {
content: "•";
margin-left: -12px;
padding-right: 8px;
}
/* arrow */
.arrow {
position: relative;
height: 10px;
width: 10px;
margin-left: 2em;
}
.arrow::before,
.arrow::after {
content: "";
position: absolute;
bottom: 0px;
width: 0.1rem;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.arrow::before {
left: -2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #394a6d;
}
.arrow::after {
left: 2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #394a6d;
}
.open .arrow::before {
left: -2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open .arrow::after {
left: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow::after {
left: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #394a6d;
}
.open .arrow::before {
left: -2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.open .arrow::after {
left: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
.filter__settings {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.custom__select-trigger {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin-right: auto;
}
.filter__settings .custom__select-wrapper {
margin: 0 2em;
}
.custom__select-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.custom__select-wrapper:last-child {
margin-left: auto;
}
}
.hidden {
display: none !important;
}
.article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: none;
}

<section class="filter">
<div class="filter__settings">
<div class="custom__select-wrapper">
<h6>filter by</h6>
</div>
<div class="custom__select-wrapper">
<div class="custom__select story-sel selector">
<div class="custom__select-trigger">
<h6>Story Type</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown story-selector" id="storyFilter">
<span class="custom__option selected" data-type="all">All</span>
<span class="custom__option" data-type="news">News and Media</span>
<span class="custom__option" data-type="analysis">Analysis</span>
<span class="custom__option" data-type="press">Press Releases</span>
</div>
</div>
</div>
<div class="custom__select-wrapper">
<div class="custom__select year-sel selector">
<div class="custom__select-trigger">
<h6>Year</h6>
<div class="arrow"></div>
</div>
<div class="custom__options dropdown year-selector" id="yearFilter">
<span class="custom__option selected" data-year="all">All</span>
<span class="custom__option" data-year="2021">2021</span>
<span class="custom__option" data-year="2020">2020</span>
<span class="custom__option" data-year="2019">2019</span>
<span class="custom__option" data-year="2018">2018</span>
<span class="custom__option" data-year="2017">2017</span>
<span class="custom__option" data-year="2016">2016</span>
<span class="custom__option" data-year="2015">2015</span>
<span class="custom__option" data-year="2014">2014</span>
<span class="custom__option" data-year="2013">2013</span>
<span class="custom__option" data-year="2012">2012</span>
<span class="custom__option" data-year="2011">2011</span>
<span class="custom__option" data-year="2010">2010</span>
<span class="custom__option" data-year="2009">2009</span>
<span class="custom__option" data-year="2008">2008</span>
<span class="custom__option" data-year="2007">2007</span>
<span class="custom__option" data-year="2006">2006</span>
</div>
</div>
</div>
<div class="custom__select-wrapper clearFilter">
<h6 class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</h6>
</div>
</div>
</section>