Search box display issues on Search Results Page w/ Search Webpart

Question

I'm having an issue with the .ms-srch-sbLarge class on search result pages. I have a custom masterpage with the small Searchbox snippet rendered from Design Manager which is utilizing my css styles. If a user goes on a Search results page and uses the search box on a search webpart, it copies the .ms-srch-sbLarge class to my search control and screws up the display. I am trying to either override the CSS [as denoted below changing the specificity which does nothing], or to remove that class completely from the search control within my navigation only. My assumption is that the reason the styles aren't working is because of something in the js fired when someone hits the enter button in the search input within the actual webpart.

Here is the css I am using to target the div and input for the Search control:

div#ct100_ct148_csr_sboxdiv.ms-srch-sbLarge.ms-srch-sb-border {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1em;}
input#ct100_ct148_csr_sboxdiv.ms-textLarge.ms-srch-sbLarge-fullWidth{ width:200px; background-color:transparent; padding: 0px 1px 0px 0px; margin: 0px 0px 0px 5px; height:18px; outline-style:none; border-style:none; display:inline-block; font:inherit; }
a#ct100_ct148_csr_SearchLink.ms-srch-sb-searchLink {height:20px; width:20px;}

Please see the images to denote what it showcased in the dev tools AFTER making an entry in the Search webpart input control. [Also note, the pictures that demonstrate what is happening].

I have tried changing the specificity of the css and using jQuery to target the .ms-srch-sbLarge class only on the elements in the header. the jQuery does not render - again, I am assuming bc I have it set to document.ready.

Answer 1

Yeah! OP (Original Poster) found the cause... he read ctl00 as ct100

---

You can't block CSS being applied

You can increase CSS Specificity to overrule other (later applied) CSS

.ms-srch-sbLarge.ms-srch-sbLarge{
  color:red;
}

Note SharePoint uses this sometimes as well... then raise the specificity of your selector:

.ms-srch-sbLarge.ms-srch-sbLarge.ms-srch-sbLarge{
  color:red;
}

Those who don't understand CSS will use !important, but that totally destroys all capabilities for other selectors to apply formatting

Re: comments

CSS Specificity can only be overruled when code sets inline styles (not classes!) on an element. If SP adds a class later it can always be overruled by previous loaded selectors with a higher Specificity.

Here is a screenshot where I applied higher CSS Specificity (marked blue) to counter what SP applies in .ms-srch-sbLarge

That class does not control the INPUT, so you have to counter more of SharePoints CSS to get what you want

CSS Selectors

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

is a must read,

With CSS Specificity you can change any CSS any time

the only thing that trumps Specificity is (inline) style=" " attributes on Elements.
That is why CSS designers hate inline styles.

Last resort

If you still have problems with existing CSS you can dive into document.stylesheets with JavaScript, disable stylesheets or dive deeper into CSSrules of each stylesheet to delete individual rules

See: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet