2、其次点击要设置的文件,并点击选中元素,选择下拉框。
3、最后在选项栏中,点击放置,选择呢放置到标题下即可。
<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
selection{
appearance:none
-moz-appearance: none /* Firefox */
-webkit-appearance:none /* Safari 和 Chrome */
}
可以用appearance去掉默认样式,然后你就能随便搞了。