搜索框左边有下拉菜单,求大牛告诉一下jsjQuery+div+css怎么完成这个

html-css021

搜索框左边有下拉菜单,求大牛告诉一下jsjQuery+div+css怎么完成这个,第1张

//记得采纳哦!

<select>

  <option>你好</option>

  <option>1</option>

  <option>2</option>

  <option>3</option>

</select>

<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