Search Box Styles

Choose a search box style

Choose a search box from the nine styles below. After you have copied the search box code, see the installation instructions and add the code to your Web page.

Style 1

Instructions

Style 2

Instructions

Style 3

Instructions

Style 4

Instructions

Style 5

Instructions

Style 6

Instructions

Style 7

Instructions

Style 8

Instructions

Style 9

Instructions

Highlight the code below, Copy and Paste into your website.

            <!-- Merriam-Webster Searchbox Style 1 -->
            <script language="Javascript">
            function getValue(term){if(document.query.elements[0].checked == true){document.location.href = "http://www.merriam-webster.com/dictionary/" + term;}
            else if(document.query.elements[1].checked == true){document.location.href = "http://www.merriam-webster.com/thesaurus/" + term;}}
            </script>
            <form name="query" method="get" action="javascript:getValue(document.query.va.value)">
            <div style="margin:0;padding:0;border:solid 1px #000000;width:142px;text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:9px;color:#FFFFFF;">
            <div style="margin:0;padding:0;background-color:#7b9ccf;">
            <img src="http://www.merriam-webster.com/images/searchbox/hdr_142x48.gif" hspace="0" vspace="0" />
            </div>
            <div style="margin:0;padding:3px;background-color:#7b9ccf;verticle-align:middle;">
            <input type="radio" name="mySelect" value="Dictionary" checked>Dictionary
            <input type="radio" name="mySelect" value="Thesaurus">Thesaurus
            </div>
            <div style="margin:0;padding:3px;background-color:#e4ebfd;">
            <input type="text" align="top" name="va" size="16">
            <input type="image" src="http://www.merriam-webster.com/images/searchbox/btn_go_19x18_blue_matte.gif" alt="Go" width="19" height="18" border="0" style="vertical-align:-25%;">
            </div>
            </div>
            </form>

            <!-- Merriam-Webster Searchbox Style 2 -->
            <script language="Javascript">
            function getValue(term){if(document.query.elements[0].checked == true){document.location.href = "http://www.merriam-webster.com/dictionary/" + term;}
            else if(document.query.elements[1].checked == true){document.location.href = "http://www.merriam-webster.com/thesaurus/" + term;}
            else if(document.query.elements[2].checked == true){document.location.href = "http://www.merriam-webster.com/spanish/" + term;}
            else if(document.query.elements[3].checked == true){document.location.href = "http://medical.merriam-webster.com/medical/" + term;}}
            </script>
            <form name="query" method="get" action="javascript:getValue(document.query.va.value)">
            <div style="margin:0;padding:0;border:solid 1px #000000;width:142px;text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:9px;color:#4b69a7;">
            <div style="margin:0;padding:0;background-color:#e4ebfd;">
            <img src="http://www.merriam-webster.com/images/searchbox/hdr_144x128.gif" width="142" height="54" hspace="0" vspace="0" />
            </div>
            <div align="center" style="margin:0;padding:0;background-color:#e4ebfd;">
            <table cellpadding="0" cellspacing="0" width="135" style="margin:0;padding:0;">
            <tr>
            <td align="center" valign="middle" style="margin:0;padding:0;vertical-align:middle;">
            <input type="radio" name="mySelect" value="Dictionary" checked>Dictionary <input type="radio" name="mySelect" value="Thesaurus">Thesaurus<br>
            <input type="radio" name="mySelect" value="Spanish">Spanish <input type="radio" name="mySelect" value="Medical">Medical<br>
            </td>
            </tr>
            </table>
            </div>
            <div style="margin:0;padding:3px;background-color:#e4ebfd;">
            <input type="text" align="top" name="va" size="16" />
            <input type="image" src="http://www.merriam-webster.com/images/searchbox/btn_go_19x18_blue_matte.gif" alt="Go" width="19" height="18" border="0" style="vertical-align:-25%;">
            </div>   
            </div>
            </form>

            <!-- Merriam-Webster Searchbox Style 3 -->
            <script language="Javascript">
            function getValue(term){if(document.query.elements[0].checked == true){document.location.href = "http://www.merriam-webster.com/dictionary/" + term;}
            else if(document.query.elements[1].checked == true){document.location.href = "http://www.merriam-webster.com/thesaurus/" + term;}}         
            </script>
            <form name="query" method="get" action="javascript:getValue(document.query.va.value)">
            <div style="margin:0;padding:0;border:solid 1px #000000;width:170px;text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;">
            <div style="margin:0;padding:0;background-color:#000062;color:#FFFFFF;">Merriam-Webster Online
            </div>
            <div align="center" style="margin:0;padding:3px;background-color:#FFFFFF;color:#970100;">
            <table align="center" cellpadding="0" cellspacing="0" style="margin:0;padding:0;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#970100;">
            <tr>
            <td width="55px" style="margin:0;padding:0;">
            <img src="http://www.merriam-webster.com/images/searchbox/mwlogo_matte_white.gif" width="44" height="44" hspace="0" vspace="0" align="left" />
            </td>
            <td align="left" style="margin:0;padding:0;vertical-align:middle;">
            <input type="radio" name="mySelect" value="Dictionary" checked>Dictionary<br />
            <input type="radio" name="mySelect" value="Thesaurus">Thesaurus
            </td>
            </tr>
            </table>
            </div>
            <div style="margin:0;padding:3px;background-color:#FFFFFF;">
            <input type="text" align="top" name="va" size="22" />
            <input type="image" src="http://www.merriam-webster.com/images/searchbox/btn_go_19x18_blue_matte.gif" alt="Go" width="19" height="18" border="0" style="vertical-align:-25%;">
            </div>
            </div>
            </form>

            <!-- Merriam-Webster Searchbox Style 4 -->
            <script language="Javascript">
            function getValue(term){if(document.query.elements[0].checked == true){document.location.href = "http://www.merriam-webster.com/dictionary/" + term;}
            else if(document.query.elements[1].checked == true){document.location.href = "http://www.merriam-webster.com/thesaurus/" + term;}}
            </script>
            <form name="query" method="get" action="javascript:getValue(document.query.va.value)">
            <div style="margin:0;padding:0;border:solid 1px #000000;width:170px;text-align:center;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;">
            <div style="margin:0;padding:0;background-color:#000062;color:#FFFFFF;">Merriam-Webster Online
            </div>
            <div align="center" style="margin:0;padding:3px;background-color:#E4EBFD;">
            <table align="center" cellpadding="0" cellspacing="0" style="margin:0;padding:0;font-family:Geneva,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;color:#000066;">
            <tr>
            <td width="55px" style="margin:0;padding:0;">
            <img src="http://www.merriam-webster.com/images/searchbox/mwlogo_matte_white.gif" width="44" height="44" hspace="0" vspace="0" align="left" />
            </td>
            <td align="left" style="margin:0;padding:0;vertical-align:middle;">
            <input type="radio" name="mySelect" value="Dictionary" checked>Dictionary<br />
            <input type="radio" name="mySelect" value="Thesaurus">Thesaurus
            </td>
            </tr>
            </table>
            </div>
            <div style="margin:0;padding:3px;background-color:#E4EBFD;">
            <input type="text" align="top" name="va" size="22" />
            <input type="image" src="http://www.merriam-webster.com/images/searchbox/btn_go_19x18_blue_matte.gif" alt="Go" width="19" height="18" border="0" style="vertical-align:-25%;">
            </div>
            </div>
            </form>