Search box options, how to convert input form into select form_html/css_WEB-ITnose

The code is as follows

<form name=bf onSubmit="bottomForm();return false;">    <script>  function bottomForm(){  var $=document.bf.key.value;  if(document.bf.sto[0].checked)window.open("http://xxx/index.php?s=vod-search-wd-"+$,"a1");  if(document.bf.sto[1].checked)window.open("http://xxx/?cat=103&s="+$,"a2");  if(document.bf.sto[2].checked)window.open("http://xxx/?cat=1&s="+$,"a3");  return false}  </script>   <div class="form">  <h4>搜索</h4>  <input name=sto type=radio value="0" checked=true>动画 <input name=sto type=radio value="1">萌化 <input name=sto type=radio value="2">资讯</a> <input name="key" class="search-keyword" value="（输入搜索内容……）" onfocus="if(this.value=='（输入搜索内容……）'){this.value='';}"  onblur="if(this.value==''){this.value='（输入搜索内容……）';}">  <button type="submit" class="search-submit">搜索</button>  </div>  </form> 

How to convert it into the following image style:

Reply to discussion (solution)

<form name=bf onSubmit="bottomForm();return false;">    <script>  function bottomForm(){  var $=document.bf.key.value;  if(document.bf.sto.selectedIndex==0)window.open("http://xxx/index.php?s=vod-search-wd-"+$,"a1");  if(document.bf.sto.selectedIndex==1)window.open("http://xxx/?cat=103&s="+$,"a2");  if(document.bf.sto.selectedIndex==2)window.open("http://xxx/?cat=1&s="+$,"a3");  return false}  </script>   <div class="form">  <h4>搜索</h4> <select name="sto">	<option value="0" selected="selected">动画</option>	<option value="1">萌化</option>	<option value="2">资讯</option></select><input name="key" class="search-keyword" value="（输入搜索内容……）" onfocus="if(this.value=='（输入搜索内容……）'){this.value='';}"  onblur="if(this.value==''){this.value='（输入搜索内容……）';}">  <button type="submit" class="search-submit">搜索</button>  </div>  </form> 

Directly change to select tag

Directly change to select tag

That will also change, but I don’t know how to do it with js.... .