Cookie-Banner auf jeder Seite ausblenden — 5 fertige Snippets

15 Mai 2026 · von JustZix Team

Die DSGVO sollte uns Kontrolle über Cookies geben. Sie gab uns Pop-ups, die auf jeder zweiten Seite 30% des Bildschirms blockieren. Dieser Artikel zeigt fünf Wege, diese Wand ein für alle Mal loszuwerden — mit CSS, JavaScript und der JustZix-Erweiterung.

Ist das legal?

Ja. Die DSGVO und die ePrivacy-Richtlinie verpflichten den Seitenbetreiber (er muss vor dem Setzen von Cookies um Einwilligung bitten). Auf deiner Seite — als Nutzer — darfst du frei verändern, wie eine Seite in deinem Browser aussieht. Genau wie jeder Adblocker oder der Safari-Lesemodus. Ein wichtiger Vorbehalt: das Ausblenden des Banners gilt in der Regel nicht als Einwilligung in Cookies — die meisten Seiten setzen weiterhin nur unbedingt notwendige Cookies, bis du ausdrücklich auf „Akzeptieren" klickst.

Methode 1 — universelles CSS für gängige Klassen

Am einfachsten und sichersten. Erfasst ~80% der Banner im Web:

/* Cookie-Banner — gängige Klassen- und ID-Muster */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
  display: none !important;
}

/* Viele Banner sperren das Scrollen des Body bis zum Klick */
html, body {
  overflow: auto !important;
  position: static !important;
}

Der zweite Block ist entscheidend — viele Banner setzen overflow: hidden auf <body>, um das Scrollen zu blockieren, bis du akzeptierst. Erzwungenes overflow: auto stellt das normale Verhalten wieder her.

Methode 2 — aggressive Attribut-Selektoren

Wenn eine Seite dynamische Klassennamen verwendet (Tailwind, CSS-in-JS) und das Basismuster nicht passt, ziele auf Attribute:

/* Erfasse alles mit "cookie" oder "consent" in Klasse / ID */
[class*="cookie" i],
[id*="cookie" i],
[class*="consent" i],
[id*="consent" i],
[class*="gdpr" i],
[role="dialog"][aria-label*="cookie" i] {
  display: none !important;
}

Das i-Flag in Attribut-Selektoren (z. B. [class*="cookie" i]) macht sie case-insensitive. Ohne es würde .CookieBanner nicht auf "cookie" passen.

Warnung: dieses Snippet kann zu viel erfassen — z. B. wird ein Artikel über Cookies (das Gesetz!) ebenfalls ausgeblendet. Setze es bewusst ein, idealerweise in einem Ordner mit Regeln, die auf bestimmte Domains beschränkt sind.

Methode 3 — `:has()`-Selektor (modern)

Seit Chrome 105 und Safari 15.4 kannst du :has() verwenden — einen Selektor, der ein Element anvisiert, das ein Kind enthält, das einem Muster entspricht. Perfekt für Cookie-Banner, denn sie haben immer einen „Akzeptieren"-Button im Inneren:

/* Praktische Version — fixed/sticky Container mit Accept-Button anvisieren */
div:has(> button[aria-label*="Accept" i]),
div:has(> button[aria-label*="cookie" i]),
aside:has(> button[aria-label*="consent" i]) {
  display: none !important;
}

CSS unterstützt :contains() nicht (das ist eine jQuery-Erfindung). Stattdessen zielen wir auf das Attribut aria-label — gut gestaltete Banner haben es ohnehin für Screenreader.

Methode 4 — JavaScript klickt „Akzeptieren" automatisch

Wenn CSS nicht reicht (Banner im Shadow DOM, ganzseitiger Blocker), klickt JS für dich. Schneller, als du es bemerkst:

// Klickt "Akzeptieren"-Buttons automatisch — funktioniert auch in iframes mit Cookies
let attempts = 0;
const interval = setInterval(() => {
  if (++attempts > 20) return clearInterval(interval);

  const candidates = [
    ...document.querySelectorAll('button, a[role="button"], input[type="button"]')
  ];

  const target = candidates.find(el => {
    const text = (el.textContent || el.value || '').trim().toLowerCase();
    const aria = (el.getAttribute('aria-label') || '').toLowerCase();
    return /^(alle akzeptieren|akzeptieren|alle zulassen|zustimmen|einverstanden|accept all|accept)$/i
      .test(text) || /accept|akzeptieren|zustimmen/.test(aria);
  });

  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

Es prüft alle 500ms für 10 Sekunden (20 Versuche × 500ms). Findet den ersten passenden Button — klickt und stoppt. In der Praxis: du siehst den Banner nicht einmal.

Ethischer Hinweis: mit einem Klick auf „Akzeptieren" willigst du in Marketing-Cookies ein. Wenn dich das stört — nutze Methode 1+2 (ausblenden ohne Einwilligung). Die Seite sieht dich dann als anonymen Nutzer, der schlicht nicht reagiert hat.

Methode 5 — Shadow DOM (Extremfälle)

OneTrust, Cookiebot, Usercentrics — die beliebtesten Cookie-Banner-SaaS — rendern ihre UI oft im Shadow DOM. CSS von außerhalb des Shadow Root erreicht es dort nicht. Du brauchst JS:

// Host-Element finden (nach gängigen Namen), in den shadowRoot greifen
function hideShadowBanners() {
  const hosts = document.querySelectorAll(
    '#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
  );

  hosts.forEach(host => {
    host.style.display = 'none';
    // Plus Shadow-Inhalt (falls Shadow DOM verwendet wird)
    if (host.shadowRoot) {
      const style = document.createElement('style');
      style.textContent = ':host { display: none !important; }';
      host.shadowRoot.appendChild(style);
    }
  });
}

// Erster Lauf + Observer für späte Einfügungen
hideShadowBanners();
new MutationObserver(hideShadowBanners)
  .observe(document.body, { childList: true, subtree: true });

Der MutationObserver erfasst auch Banner, die sich nach DOMContentLoaded selbst einfügen — typischerweise laden Tracker-Skripte asynchron und der Banner erscheint 1-2 Sekunden nach dem Seitenladen.

So bindest du das in JustZix ein

Installiere die Erweiterung (Download-Seite — ZIP, 2 Minuten).
Klicke auf das JustZix-Symbol → „Neue Regel".
URL-Muster: * (überall anwenden) oder https://example.com/* (eine Domain).
Füge im CSS-Tab Methode 1 (universell) ein — lass sie aktiv.
Wenn du auf eine Seite triffst, wo nichts ausgeblendet wird — füge Methode 4 als JS-Regel hinzu, beschränkt auf diese Domain.
Synchronisiere deinen Schlüssel über Geräte hinweg — der Banner verschwindet auf Laptop, PC und Arbeitsrechner gleichzeitig.

Fallstricke, die du vermeiden solltest

Setze display: none nicht auf html oder body — du würdest die ganze Seite ausblenden.
Das Seitenladen kann leicht langsamer werden — das Auto-Accept-JS mit 20 Durchläufen beschäftigt die Event-Loop. In der Praxis nicht spürbar.
Manche Paywalls tarnen sich als Cookie-Banner (z. B. große Nachrichtenseiten) — das Ausblenden des Banners schaltet den Inhalt nicht frei. Dort hilft nur eine dedizierte Regel pro Seite.
Der Banner eines Shops kann rechtlich vorgeschrieben sein (z. B. Einwilligung beim Checkout). Blende ihn nicht auf Seiten aus, auf denen du etwas kaufen willst.

Was kommt als Nächstes

Derselbe Ansatz funktioniert bei anderen UX-Killern: Newsletter-Pop-ups, „Benachrichtigungen aktivieren", Paywall-Vorschauen. Sieh dir weitere fertige Snippets im Bereich Beispiele an, oder echte Anwendungsfälle für JustZix.

Installiere JustZix und schreibe deine eigenen Regeln. Das erste Snippet aus diesem Artikel in die Erweiterung eingefügt = der Banner ist auf 80% der Seiten weg. Der Rest ist nur Iteration pro problematischer Domain.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Cookie-Banner auf jeder Seite ausblenden — 5 fertige Snippets

Ist das legal?

Methode 1 — universelles CSS für gängige Klassen

Methode 2 — aggressive Attribut-Selektoren

Methode 3 — :has()-Selektor (modern)

Methode 4 — JavaScript klickt „Akzeptieren" automatisch

Methode 5 — Shadow DOM (Extremfälle)

So bindest du das in JustZix ein

Fallstricke, die du vermeiden solltest

Was kommt als Nächstes

Bewerte diesen Beitrag

Siehe auch

Booksy-Anpassungen: ein klarerer Kalender und ein Fokusmodus

Allegro-Anpassungen: ruhiger, dichter und ohne gesponserte Anzeigen

Canva-Anpassungen — ein größerer Editor und weniger Lärm

Probiere es selbst aus

Methode 3 — `:has()`-Selektor (modern)