怎么用html5+js+css实现如图所示的搜索下拉框，谢谢

html-css016

怎么用html5+js+css实现如图所示的搜索下拉框，谢谢,第1张

<div class="searchModel">

<select name="" id="" value="2">

<option value="0">科室</option>

<option value="1">疾病</option>

<option value="2">医院</option>

</select>

<input type="text" placeholder="请输入搜索内容">

<button>搜索</button>

</div>

<style>

html,

body,

div,

input,

select,

button {

margin: 0

padding: 0

border: none

outline: none

}

.searchModel {

display: flex

border: 1px solid orange

border-radius: 4px

overflow: hidden

margin: 20px

height: 44px

}

.searchModel select {

color: #fff

background: orange

padding: 0 22px

/* appearance: none */

/* -moz-appearance: none */

/* Firefox */

/* -webkit-appearance: none */

/* Safari 和 Chrome */

}

select::-ms-expand {display: none}

.searchModel select option{

color: #333

background: #fff

}

.searchModel input {

flex: 1

padding: 0 10px

}

.searchModel button {

width: 44px

color: #fff

background: orange

}

</style>

要改变下拉选项选中的样式，就用div去模拟下拉框

js部分，button提交表单，或者是div模拟提交ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>输入框提示列表效果</title>

<style type="text/css">

<!--

body{background:#fff}

.Menu {

position:relative

width:204px

height:127px

z-index:1

background: #FFF

border:1px solid #000

margin-top:-100px

display:none

}

.Menu2 {

position: absolute

left:0

top:0

width:100%

height:auto

overflow:hidden

z-index:1

}

.Menu2 ul{margin:0padding:0}

.Menu2 ul li{width:100%height:25pxline-height:25pxtext-indent:15px

border-bottom:1px dashed #ccccolor:#666cursor:pointer

change:expression(

this.onmouseover=function(){

this.style.background="#F2F5EF"

},

this.onmouseout=function(){

this.style.background=""

}

)

}

input{width:200px}

.form{width:200pxheight:auto}

.form div{position:relativetop:0left:0margin-bottom:5px}

#List1,#List2,#List3{left:0pxtop:93px}

-->

</style>

<script type="text/javascript">

function showAndHide(obj,types){

var Layer=window.document.getElementById(obj)

switch(types){

case "show":

Layer.style.display="block"

break

case "hide":

Layer.style.display="none"

break

}

}

function getValue(obj,str){

var input=window.document.getElementById(obj)

input.value=str

}

</script>

</head>

<body>

<div class="form">

<div>Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show')" onblur="showAndHide('List1','hide')"></div>

<!--列表1-->

<div class="Menu" id="List1">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt','中国CHINA')showAndHide('List1','hide')">中国CHINA</li>

<li onmousedown="getValue('txt','美国USA')showAndHide('List1','hide')">美国USA</li>

</ul>

</div>

</div>

<div>：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show')" onblur="showAndHide('List2','hide')"></div>

<!--列表2-->

<div class="Menu" id="List2">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt2','男Male')showAndHide('List2','hide')">男Male</li>

<li onmousedown="getValue('txt2','女Female')showAndHide('List2','hide')">女Female</li>

</ul>

</div>

</div>

<div>education：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show')" onblur="showAndHide('List3','hide')"></div>

<!--列表3-->

<div class="Menu" id="List3">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt3',this.innerText)showAndHide('List3','hide')">大专</li>

<li onmousedown="getValue('txt3','本科')showAndHide('List3','hide')">本科</li>

<li onmousedown="getValue('txt3','硕士')showAndHide('List3','hide')">硕士</li>

<li onmousedown="getValue('txt3','本科')showAndHide('List3','hide')">本科</li>

</ul>

</div>

</div>

</div><br/><br/>更多代码请访问 <a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>

</body>

</html>

一行的表单.html     文件代码清单如下：

<!doctype html>

<html langj="zh">

  <head>

    <meta charset="utf-8">

    <title>一行的表单</title>

    <link rel="stylesheet" href="form.css">

  </head>

  <body>

    <form action="" method="">

      <fieldset>

        <legend></legend>

        <select>

          <option value="XXXX">XXXX</option>

          <option value="YYYY">YYYY</option>

          <option value="ZZZZ">ZZZZ</option>

        </select>

        <input type="text" placeholder=""><input type="button" value="搜索">

      </fieldset>

    </form>

  </body>

</html>

form.css    文件代码清单如下：

form {

display: inline-block

}

select, input {

margin: 0

padding: 0

float: left

}