Question

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

Answer 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>

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

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