CSS Bootstrap form-floating textarea label Dark Mode

Pfandfinder · 16. April 2026

hallo,

ich möchte mit Bootstrap eine form im Dark Mode bauen. mit diesem CSS läuft soweit alles auch korrekt ab, nur das label bei der textarea bei active hat so einen hellen Hintergrund. selbst die KI kann mir nicht helfen. weiß jemand wie ich das auch noch ändere ? bei den normalen inputs ist es ja korrekt.

HTML:

<div class="col-12">
    <div class="form-floating">
        <textarea name="textare" id="textare" class="form-control" placeholder=""></textarea>
        <label for="textare">Das ist der Label-Text</label>
    </div>
</div>

CSS:

[data-theme="dark"] {
  .form-control {
    background-color: #2C2C2C;
    color: #e0e0f0;
    border-color: #444;
  }

  .form-control:focus {
    background-color: #2C2C2C;
    color: #e0e0f0;
    border-color: #7b7bff;
    box-shadow: 0 0 0 0.25rem rgba(123, 123, 255, 0.25);
  }

  .form-control::placeholder {
    color: #888899;
  }

  .form-control:-webkit-autofill,
  .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #2C2C2C inset;
    -webkit-text-fill-color: #e0e0f0;
    caret-color: #e0e0f0;
    border-color: #444;
    transition: background-color 5000s ease-in-out 0s;
  }

  .form-floating > label {
    color: #888899;
  }

  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #a0a0ff;
    opacity: 1;
  }
}

Cool Master · 16. April 2026

Poste doch bitte das gesamte CSS und HTML

Pfandfinder · 17. April 2026

HTML:

<!DOCTYPE html>
<html lang="de" data-theme="dark">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<head>
    <meta charset="UTF-8">  
    <script>
        (function() {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        })();
    </script>

<style>
:root { background: #ffffff; color: #212529; transition: all 0.3s; }
[data-theme="dark"] { background: #121212; color: #f8f9fa; }

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

[data-theme="dark"] {
  .form-control {
    background-color: #2D2828;
    color: #e0e0f0;
    border-color: #444;
  }

  .form-control:focus {
    background-color: #2D2828;
    color: #e0e0f0;
    border-color: #FFD87B;
    box-shadow: 0 0 0 0.25rem rgba(123, 123, 255, 0.25);
  }

  .form-control::placeholder {
    color: #8A9988;
  }

  .form-control:-webkit-autofill,
  .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #2D2828 inset;
    -webkit-text-fill-color: #e0e0f0;
    caret-color: #e0e0f0;
    border-color: #444;
    transition: background-color 5000s ease-in-out 0s;
  }

  .form-floating > label {
    color: #8A9988;
  }

  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #455638;
    opacity: 1;
  }

  .form-control.is-invalid {
    border-color: #ff6b6b;
    background-image: none;
  }

  .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25);
  }

  .invalid-feedback {
    color: #ff8888;
  }

  .form-control.is-valid {
    border-color: #4caf88;
  }

  .form-control.is-valid:focus {
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 136, 0.25);
  }

  .form-control:disabled,
  .form-control[readonly] {
    background-color: #2a2a3e;
    color: #282A1C;
    border-color: #555033;
  }
}

[data-theme="dark"] label {
  background-color: transparent;
  color: #e0e0f0;
}

[data-theme="dark"] .form-floating > label {
  background-color: #121212;
}
</style>
</head>
<body>
    <form>      
        <div class="row g-3">
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="text" name="name" id="name" class="form-control" placeholder="" required>
                    <label for="name">Name</label>
                </div>
            </div>
            <div class="col-12">
                <div class="form-floating">
                    <textarea name="comment" id="comment" class="form-control" placeholder="" required></textarea>
                    <label for="comment">Das ist der Label-Text</label>
                </div>
            </div>
        </div>
</form>
</body>
</html>

User007 · 17. April 2026

Hi...

Nach nur grobem Überfliegen des Quelltexts...
Gibt's mglw. noch spezielle Formatierungsanweisungen für die ID-Objekte?
Ansonsten kommentier' mal die Zeilen 84 - 89 aus und prüf', ob sich was verändert.

Pfandfinder · 17. April 2026

hat leider nicht geholfen

Cool Master · 19. April 2026

Zeile 62-70 in diesem CSS ist der Übeltäter:

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/scss/forms/_floating-labels.scss

Insbesondere:

background-color: $input-bg;

Suche

CSS Bootstrap form-floating textarea label Dark Mode

Pfandfinder

Lieutenant

Anhänge

Cool Master

Fleet Admiral

Pfandfinder

Lieutenant

User007

Admiral

Pfandfinder

Lieutenant

Cool Master

Fleet Admiral