Chrisj 1 Posted September 4, 2015 I saw a website that had the drop-down menu in the search bar (on the right - where it shows "all Images" and a down arrow) - see SearchBar1 image attached. My current one on my web page looks like SearchBar2 image attached. I'm looking for guidance on how to change my code so that the drop-down menu looks more like SearchBar1 image. Any help will be appreciated. Here's my current code (which works successfully): <form method="get" action="../search.php" name="myForm" /> <select size="1" name="type" class="dropdown_box" /> <a href="#" class="dropdowmSubstitute" role="button"> <span class="textContainer"> <span class="dropdownText"> <option value="any string here">ALL</option> </span> </span> <span class="arrowContainer"> <span class="dropdownArrow">ā¼</span> </span> </a> <option value="1">Choice1</option> <option value="2">Choice2</option> </select> <input autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" /> <input type="submit" value="VIEW"/> </form> Quote Share this post Link to post Share on other sites
cyberRobot 118 Posted September 4, 2015 (edited) Have you looked into using CSS to hide the normal border of the fields? You can then add a <span> tag around the fields. CSS can then be added to the <span> tag to place a border around both fields to make them look like a single field. Edited September 4, 2015 by cyberRobot Quote Share this post Link to post Share on other sites
Chrisj 1 Posted September 4, 2015 Thanks for your reply. Much appreciated. Although I'm completely clear on what you're suggesting? I'm sure I can "hide the current border of the drop-down list, but I'm not completely clear on the rest of your suggestion. Would you mindĀ providing an example using my code? Quote Share this post Link to post Share on other sites
Ch0cu3r 255 Posted September 5, 2015 Here is a live example of what cyberRobot means https://jsfiddle.net/k07ymqs4/ 1 Quote Share this post Link to post Share on other sites