css Filtros com JS puro
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Filtros com JS puro相关的知识，希望对你有一定的参考价值。
document.addEventListener("DOMContentLoaded", function() {
function $sel(el) {
return document.querySelector(el);
}
function $all(el) {
return document.querySelectorAll(el);
}
function filteringByBreakpoint() {
const phone = $all("[data-scenario='phone']");
const tablet = $all("[data-scenario='tablet']");
const desktop = $all("[data-scenario='desktop']");
const btnPhone = $sel(".phone");
const btnTablet = $sel(".tablet");
const btnDesktop = $sel(".desktop");
const btnAll = $sel(".all");
const buttons = [btnPhone, btnTablet, btnDesktop];
btnAll.addEventListener("click", () => {
[...phone, ...tablet, ...desktop].forEach(scenario => {
scenario.classList.remove("hide");
});
});
buttons.forEach(button => {
button.addEventListener("click", () => {
["phone", "tablet", "desktop"].forEach(breakpoint => {
filterScenarios(button, breakpoint, [
...phone,
...tablet,
...desktop
]);
});
});
});
function filterScenarios(button, scn, tgt) {
if (button.classList.contains(scn)) {
tgt.forEach(scenario => {
if (scenario.dataset.scenario === scn) {
if (scenario.classList.contains("hide"))
scenario.classList.toggle("hide");
} else {
if (!scenario.classList.contains("hide"))
scenario.classList.toggle("hide");
}
});
}
}
}
function searchScenarios() {
const divsAll = $all(".card");
const labels = $all(".card > .card-label");
const inputSearch = $sel(".header-container-search-input > input");
function initSearchInput(
inputSelector,
divRoot,
labelsTexts,
replaceText,
classHide,
inputLength
) {
inputSelector.addEventListener("input", event => {
if (event.target.value.length >= inputLength) {
labelsTexts.forEach(label => {
const textInput = event.target.value;
const labelText = replaceText
? label.innerText.replace("Página: ", "").trim()
: label;
const textInputMatchTextLabel = labelText
.toLowerCase()
.includes(textInput.toLowerCase());
const matchDivIsHide = $sel(
`[data-label="${labelText}"]`
).classList.contains(classHide);
if (textInputMatchTextLabel) {
if (matchDivIsHide)
$sel(`[data-label="${labelText}"]`).classList.toggle(
classHide
);
} else {
if (!matchDivIsHide)
$sel(`[data-label="${labelText}"]`).classList.toggle(
classHide
);
}
});
} else {
divRoot.forEach(div => {
div.classList.remove(classHide);
});
}
});
}
initSearchInput(inputSearch, divsAll, labels, "Página: ", "hide", 3);
}
filteringByBreakpoint();
searchScenarios();
});<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<title>Interface Report</title>
<meta charset="utf-8" />
<link rel="icon" href="favicon.png" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<!-- <script src="script.js" async></script> -->
</head>
<body>
<div id="root">
<div class="container">
<div class="header">
<div class="header-title">Interface report</div>
<div class="header-container-search">
<div class="header-container-search-buttons">
<button class="phone">Mobile</button>
<button class="tablet">Tablet</button>
<button class="desktop">Desktop</button>
<button class="all">Todos</button>
</div>
<div class="header-container-search-input">
<input type="text" />
<button type="submit">Buscar</button>
</div>
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - phone"
>
<div class="card-label">Página: Enviar e-mail - phone</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-phone.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-phone.png</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Confirmação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Erro Validação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Warning Validação - phone"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo de imagens - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo de Doc - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de Doc - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_Doc-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_Doc-phone.png
</div>
</div>
<div
class="card"
data-scenario="phone"
data-label="Enviar e-mail - Anexo Erros - phone"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - phone
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-phone.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-phone.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - tablet"
>
<div class="card-label">Página: Enviar e-mail - tablet</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-tablet.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-tablet.png</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Confirmação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Erro Validação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Warning Validação - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Anexo de imagens - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-tablet.png
</div>
</div>
<div
class="card"
data-scenario="tablet"
data-label="Enviar e-mail - Anexo Erros - tablet"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - tablet
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-tablet.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-tablet.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - desktop"
>
<div class="card-label">Página: Enviar e-mail - desktop</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img src="../reference/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img src="../26_08_2019/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img src="../test/Enviar_e_mail-desktop.png" alt="" />
</div>
</div>
</div>
<div class="card-filename">filename: Enviar_e_mail-desktop.png</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Confirmação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Confirmação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Confirma__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Confirma__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Erro Validação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Erro Validação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Erro_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Erro_Valida__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Warning Validação - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Warning Validação - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Warning_Valida__o-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Warning_Valida__o-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo de imagens - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de imagens - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_imagens-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_imagens-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo de Doc - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo de Doc - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_de_Doc-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_de_Doc-desktop.png
</div>
</div>
<div
class="card"
data-scenario="desktop"
data-label="Enviar e-mail - Anexo Erros - desktop"
>
<div class="card-label">
Página: Enviar e-mail - Anexo Erros - desktop
</div>
<div class="card-content">
<div class="card-content-column reference">
<div class="card-content-column-label">Reference</div>
<div class="card-content-column-img">
<img
src="../reference/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column test">
<div class="card-content-column-label">Test</div>
<div class="card-content-column-img">
<img
src="../26_08_2019/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
<div class="card-content-column result">
<div class="card-content-column-label">Result</div>
<div class="card-content-column-img">
<img
src="../test/Enviar_e_mail___Anexo_Erros-desktop.png"
alt=""
/>
</div>
</div>
</div>
<div class="card-filename">
filename: Enviar_e_mail___Anexo_Erros-desktop.png
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.hide{
display: none!important;
}
button.phone {
background: #00b8ff;
color: #096082;
}
button.tablet {
background: #1bb99a;
color: #0d6d5a;
}
button.desktop {
background: #a139ff;
color: #4e0392;
}
.header-container-search-buttons>* {
font-size: 1.3em;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #E2E7EA;
}
.card {
background: #fff;
border-radius: 5px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
display: flex;
flex: 1;
flex-direction: column;
margin: 20px 0;
padding: 15px 0;
}
.card-label {
color: #333333;
margin: 0 10px 10px;
padding: 5px 0px 10px;
/* text-transform: uppercase; */
border-bottom: 1px solid #333333;
}
.card-content {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
.card-content>div {
margin: 10px;
}
.card-content-column-label {
color: #969696;
margin-bottom: 15px;
text-transform: uppercase;
}
.card-content-column-img{
border: 2px solid #e2e7ea;
border-radius: 4px;
}
.card-content-column-img img {
width: 100%;
}
.card-filename {
background: #e8f7d0;
border-radius: 4px;
color: #63901a;
margin: 0 10px;
padding: 5px 10px;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
}
.header-container-search {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
}
.header-container-search-buttons {
display: flex;
flex: 1;
flex: 1;
flex-direction: row;
justify-content: space-evenly;
}
.header-container-search-buttons>* {
border: none;
border-radius: 4px;
flex: 1;
margin-right: 10px;
padding: 10px;
}
.header-container-search-input {
display: flex;
flex: 2;
justify-content: flex-start;
}
.header-container-search-input>button {
background: #b0e1ff;
border: none;
border-radius: 4px;
color: #2a84bb;
}
.header-container-search-input>input {
border: none;
border-radius: 4px;
flex-basis: 100%;
margin-right: 10px;
}
.header-title {
display: flex;
justify-content: center;
font-size: 2em;
margin-bottom: 20px;
margin-top: 10px;
}
button {
cursor: pointer;
}
button.all {
background: #fff;
}
button.failed {
background: #fd685d;
color: #fff;
}
button.passed {
background: #8BC34A;
color: #fff;
}
div#root {
display: flex;
justify-content: center;
margin: 0 auto;
width: 95%;
}以上是关于css Filtros com JS puro的主要内容，如果未能解决你的问题，请参考以下文章
javascript Componente Puro React
javascript Componentes puros y funcionales en ReactJS
text Eliminar los filtros por defecto de magento y agregar nuevos filtros de atributos custom
javascript DataTables：obtener valores de columnas para crear filtros
php insertaFiltros insertafiltros filtros filtro dropdown combos lista desplegable inserta