input 下拉框

样式：

 代码：

.box{
    background-color: yellow;
    width: 350px;
    height: 30px;
    position: relative;
}
.inputTag{
    margin-left: 50px;
    width: 350px;
    height: 30px;
    /* 如果不设置 box-sizing: border-box; 则盒子的宽度比父类的宽*/
    box-sizing: border-box;
}
.wrapDropDown{
    position: absolute;
    top: 0;
    width: 350px;
    height: 120px; /*为演示效果才设置height的可以不设置或设置为auto*/
    border: 1px solid green;
    left: 0px;
    margin-top: 30px;
    margin-left: 50px;
}
.wrapDropDown>div{
    border: 1px solid red;
    height: 30px;
    /*下边 这两个属性很重要 box-sizing设置盒子就30的高度不会超出
    如果有时候不小心超出了可以用margin-top为-1就是将当前盒子向上
    移动一个边框的距离*/
    box-sizing: border-box;
    /*margin-top: -1px;*/
}
html:

<div class="box">
    <input type="text" class="inputTag">
    <div class="wrapDropDown">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

</div>