Hallo, ich versuche seit einigen Stunden die Farbe vom suchen verändert,
Wenn jemand klick das Suchen Fenster bekommt in seinen Border, ein Blau Farbe, ich versuche dieser Farbe zu veränder, aber ohne Erfolgt…
Ich versuche der Class name zu finde, aber ich nicht schaffen, welcher Class name ruft diese Farbe.
Die blaue Umrandung kommt vom :focus-Zustand des Inputs. Da gibt es einen blauen box-shadow.
<input type="search" id="header-main-search-input" name="search" class="form-control header-search-input" autocomplete="off" autocapitalize="off" placeholder="Suchbegriff eingeben ..." aria-label="Suchbegriff eingeben ...">
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 66, 160, 0.6);
}
Viel Danke, noch andetre Frage, wie kann gleiche mit dem Class btn header-search-btn, der Suchen Symbol..
Mit
.header-search-btn:focus {
}
können die CSS-Einstellungen beim focus-Zustand des Buttons angepasst werden.
Wenn der Box-Shadow beim Klick in das Suchfenster zusätzlich zum Input auch auf dem Button erscheinen soll, kann folgendes CSS mit eingefügt werden:
.form-control:focus ~ .header-search-btn {
box-shadow: 0 0 0 0.2rem;
}
Der blaue Rahmen im Screenshot müsste eine ganz normale Border auf dem Button sein. Kann z.B. mit
.header-search-btn {
border: none;
}
entfernt werden.
Danke, aber ich möchte auch der Linie bis dem search icon erreichen…
Ich versuche mit
button.btn.header-search-btn:focus {
box-shadow: 0 0 0 0 rgb(119, 123, 71)
}
aber nicht funzioniert…sie sind die Classen die div rufen, wo der icon ist..
Ich habe fgeschafft…
Mit diesen Code, bekommt wie ich möchte,
.header-search .input-group {
background-color: transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(226, 207, 163);
border-radius:0;
overflow:hidden;
}