# Suchen border Farbe verändert

**URL:** <https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962>\
**Category:** Shopware 6 (German)\
**Created:** [2. April 2025 um 12:26 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962 "2025-04-02T12:26:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [2. April 2025 um 12:26 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/1 "2025-04-02T12:26:15Z")

</div>

Hallo, ich versuche seit einigen Stunden die Farbe vom suchen verändert,

 ![suchen2](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/7/97859707be07bfd9e2b30b71cb10cadd1cf9c609.png)

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.

 ![suchen3](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/d/a/da43066bc67da0ba5d1e4afd1b05d6cb158a8ae1.png)

---

<div class="post-metadata">

**Author:** ![area-net-gmbh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/area-net-gmbh/32/21995_2.png) [@area-net-gmbh](https://forum.shopware.com/u/area-net-gmbh)\
**Post date:** [2. April 2025 um 12:37 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/2 "2025-04-02T12:37:03Z")

</div>

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 ...">`

```auto
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 66, 160, 0.6);
}

```

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [2. April 2025 um 13:06 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/3 "2025-04-02T13:06:10Z")

</div>

> [@area-net-gmbh](#):
>
> ```auto
> .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..  
 ![5](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29125b47e6ce432cdd3c08a20a49ddd698082dc4.png)

---

<div class="post-metadata">

**Author:** ![area-net-gmbh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/area-net-gmbh/32/21995_2.png) [@area-net-gmbh](https://forum.shopware.com/u/area-net-gmbh)\
**Post date:** [2. April 2025 um 13:19 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/4 "2025-04-02T13:19:20Z")

</div>

Mit

```auto
.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:

```auto
.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

```auto
.header-search-btn {
    border: none;
}

```

entfernt werden.

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [2. April 2025 um 13:42 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/5 "2025-04-02T13:42:07Z")

</div>

> [@area-net-gmbh](#):
>
> `.form-control:focus {`

Danke, aber ich möchte auch der Linie bis dem search icon erreichen…

Ich versuche mit

```auto
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..

 ![suchen6](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/f/6fbc014f8234d5c07ab15165a5bfedb8e28ebb88.jpeg)

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [3. April 2025 um 08:53 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/6 "2025-04-03T08:53:28Z")

</div>

Ich habe fgeschafft…  
Mit diesen Code, bekommt wie ich möchte,

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [3. Mai 2025 um 08:54 UTC](https://forum.shopware.com/t/suchen-border-farbe-veraendert/106962/7 "2025-05-03T08:54:11Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.