h5下拉框怎么放在标题下

html-css012

h5下拉框怎么放在标题下,第1张

1、首先打开HTML5软件,并登陆自己的个人账户。

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去掉默认样式,然后你就能随便搞了。