# CSS Conflicts In Header

**URL:** <https://meta.discourse.org/t/css-conflicts-in-header/241867>\
**Category:** Development\
**Tags:** css\
**Created:** [October 13, 2022, 8:00pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867 "2022-10-13T20:00:27Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![chrispine1991](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrispine1991/32/277472_2.png) [@chrispine1991](https://meta.discourse.org/u/chrispine1991)\
**Post date:** [October 13, 2022, 8:00pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867/1 "2022-10-13T20:00:27Z")

</div>

**[Chocoboe Studios](https://discourse.chocoboe.com/)**

```plaintext
// custom search banner customizations
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: #f9f9f9;
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
  h1 {
    font-size: 4em;
  }

```

But this causes the search bar text to fade into the Background Color.

`<div id="ember16" class="ember-view"><!----><div class="search-widget"><div class="search-menu" data-mouse-down-outside="true"><button class="widget-button btn search-icon no-text btn-icon"><svg class="fa d-icon d-icon-search svg-icon svg-node" aria-hidden="true"><use xlink:href="#search"></use></svg></button><div class="search-input"><input id="search-term" type="text" value="" autocomplete="off" placeholder="Search" aria-label="Search"><div class="searching"><a class="widget-link show-advanced-search" href="/search?expanded=true" title="Open advanced search"><svg class="fa d-icon d-icon-sliders-h svg-icon svg-node" aria-hidden="true"><use xlink:href="#sliders-h"></use></svg></a></div></div></div></div></div>`

---

_[View the full topic](https://meta.discourse.org/t/css-conflicts-in-header/241867)._