Skip navigation links

Search Tool

The Search Tool consists of a search box, the text “Search…” and a search button/icon shaped like a magnifying glass.

  • Required on every institutional web page
  • Search results for the current website displayed first
  • Search results screen enables searching across every university web page
  • Placement instructions detailed in Layout (HTML) and Style (CSS)
  • CSS for responsive and non-responsive websites is available in Layout (HTML) and Style (CSS) - Section 2.3. Copy and paste CSS code at the end of the website's main CSS file.
  • Exemption: Intercollegiate Athletics

The search tool is 319 pixels wide by 28 pixels tall, with a roundness of 3 pixels.

The magnifying glass icon is 16 pixels x 16 pixels.

Sample code is provided in Section 3.


4.1 Search Box Style Variations

  • Standard: white fill and 1 pixel stroke set to #666666
  • Semi-transparent: no fill, 1 pixel stroke set to #FFFFFF, and 50% transparent white search button/icon
MSU Search Tool 
Figure 4-1. Search Tool


4.2 Use

  • Use approved, unaltered versions only. (See Resources and Downloads)
  • Use to display search results.
  • Do not place more than one search tool on a web page.
  • Verify and adjust background image to ensure accessibility color contrast when using the semi-transparent search box.
  • Do not combine with any other marks, graphic elements, or words.


4.3 Exceptions

  • Please work with Comms if you have questions about required elements.
  • You may request an exception to display additional search tools. For example, tools for searching a course catalog, knowledge base, or library book/journal.


4.4 Related Resources

For technical implementation details, refer to the Search Tool Implementation Guide.


4.5 Unacceptable Search Tool Variations

  • Do not reconfigure or resize the Search icon.
  • Do not alter the placeholder text inside the Search box.
  • Do not change the size of the Search box.
  • Do not remove the Search box border.
  • Do not change the style, width, or color of the Search box border.
  • Do not add "drop shadow" effects to the Search box.
Samples of unacceptable Search Tool variations
Figure 4-2. Samples of unacceptable Search Tool variations - view full resolution