How do I put the drop-down menu in the search bar?

[Chrisj]

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>

[cyberRobot]

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

[Chrisj]

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?

[Ch0cu3r]

Here is a live example of what cyberRobot means

https://jsfiddle.net/k07ymqs4/

[Chrisj]

Thank you