Hey there! Let's work through why your search icon is stuck showing up black instead of the intended blue. From the code you shared, you’ve already tried setting fill: '#00a1af' on the adjacent SVG, but something’s overriding that—let’s break down the fixes:

1. Check for inline fill on the SVG itself #

First, pop open your browser’s dev tools and inspect the SVG element. If it has an inline attribute like fill="black", that’ll take priority over your CSS. You can either:

• Remove the inline fill attribute directly from the SVG markup, or
• Use !important as a quick override (only do this if you can’t adjust the SVG or specificity):

  & + svg {
    fill: #00a1af !important;
  }
  

2. Boost your selector’s specificity #

Chances are, another CSS rule with higher specificity is forcing the black fill. Make your selector more specific to outrank it. For example:

• If the SVG has a class like search-icon:

  & + svg.search-icon {
    fill: #00a1af;
  }
  

• Or chain parent container classes to add weight:

  .search-container & + svg {
    fill: #00a1af;
  }
  

3. Fix placeholder selector typos #

Looking at your code, the placeholder selectors have escaped ampersands (&-ms-::placeholder) which might be causing compilation issues (if you’re using Sass/Less). Correct them to standard syntax to avoid unexpected cascading side effects:

&::-ms-input-placeholder,
&::-webkit-input-placeholder,
&::placeholder {
  color: black;
  font-size: 12px;
  background-color: white;
}

4. Use dev tools to spot conflicting rules #

Right-click the search icon, select "Inspect", and head to the "Styles" tab. You’ll see exactly which CSS rule is applying the black fill (it’ll have a strike-through if your rule is being overridden). Note that rule’s selector, then make your SVG selector more specific than that.

Try these steps in order, and your blue search icon should be back to normal in no time!

内容的提问来源于stack exchange，提问作者Bob