0

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.

Display Issue on Search

CSS in DevTools

2

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

  • The issue here for me is that the .ms-srch-sbLarge class is also applied to the Search webpart in the content area. The Search Results delegate control overrides all the Searchboxes on the page, thus displaying a huge searchbox in my header, which screws up the custom masterpage. I got around this by just using jQuery to target that class in my #topBar header and removing it, then adding .ms-srch-sb to render it as it should. This seemed the easiest way to remove the class from only the topBar w/o affecting the Searchbox in webparts. – user2004758 Feb 28 '17 at 16:39
  • or include #ctl00_PlaceHolderMain_ctl00_csr_sbox in the CSS selector to only target the one input box. That by itself overrules SharePoints CSS Specificity – Danny '365CSI' Engelman Feb 28 '17 at 16:54
  • thanks, however, that doesn't work because it's not the input box where the styling is applied. it is the div... which has the .ms-srch-sbLarge class controlling how the box is rendered. unless i am misunderstanding you. – user2004758 Feb 28 '17 at 17:52
  • 1
    I think you still do not understand what CSS Specificity is, The whole point of CSS Specificitiy is that it does not matter in what order CSS loads – Danny '365CSI' Engelman Mar 6 '17 at 13:34
  • 1
    Are you glad I made it a personal 2017 mission to educate people about CSS Specificity..even if it takes a Draconian approach... Don't worry, we all still make mistakes like these every week... it is called learning.. Once you stop making mistakes and think you know it all, you are doomed – Danny '365CSI' Engelman Mar 6 '17 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.