Question

I have a start page with 4 search engines that can be selected. How can I make each field be selected when the search engine is chosen?

Here is one of the engines:

<div id="searchrotate" class="body">
    <div class="tab_container">
    <div id="Bing" class="tab_content"><!-- Bing -->
        <div class="searchform">
        <form method="get" action="http://www.bing.com/search" name="bing-search">
            <div class="favicon"><img src="images/favicon-bing.jpg"></div>
            <input type="text" name="q" class="searchfield" value="">
            <input type="image" src="images/search-btn.jpg" class="searchbtn" alt="Submit">
        </form>
        </div>
    </div>

…and the css for the “rotation” between the 4 options:

#searchhold { width:360px; height:62px; }
#searchselect { width:360px; height:26px; }
#searchselect ul { margin:0; padding:0; float: left; list-style:none; }
#searchselect ul li { float:left; overflow: hidden; position: relative; }
#searchselect ul li.current { color:#000; font-weight:bold; background:#ccc; background: -moz-linear-gradient(top, #FFFFFF 0%, #CFCFCF 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CFCFCF)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CFCFCF',GradientType=0 ); /* ie */ }
#searchselect ul li.current a { color:#000; }
#searchselect ul li a { display:block; width:68px; height:14px; padding:6px; text-align:center; color:#fff; text-decoration:none; }
#searchrotate { width:360px; height:36px; background: #cfcfcf; background: -moz-linear-gradient(top, #FFFFFF 0%, #E4E4E4 50%, #CFCFCF 51%, #D9D9D9 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#E4E4E4), color-stop(51%,#CFCFCF), color-stop(100%,#D9D9D9)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#D9D9D9',GradientType=0 ); /* ie */ }
#searchrotate div.searchform { width:350px; height:26px; padding:5px; }
#searchrotate div.searchform div.favicon { float:left; display:block; width:27px; height:27px; }
#searchrotate input.searchfield { float:left; display:block; width:266px; height:15px; padding:5px; border:1px solid #b0b0b0; background:#535353; color:#fff; font-size:11px; }
#searchrotate input.searchbtn { float:right; display:block; width:44px; height:27px; border:none; background:#a8a8a8; }

Answer 1

Do it like this:

<div id="clickme" onclick="document.getElementById('bing').focus()">This can be any element</div>
<input type="text" id="bing"/>

If you click “clickme” div, the bing input field will be selected. You can do this with almost any type of element (input, div, span, etc) and they can be in any place of the document.