首先声明我不会写下拉框，这是在网上找的demo

如图红色框框标出来的地方，鼠标根本就点不到，一点就会到输入框里面

下面是wxss和wxml

wxss：

.select_box {

background: #fff;

width: 71%;

margin: 10rpx;

position: relative;

float: right;

}

.select {

box-sizing: border-box;

width: 100%;

height: 70rpx;

border: 1px solid #efefef;

border-radius: 8rpx;

display: flex;

align-items: center;

padding: 0 20rpx;

}

.select_text {

font-size: 30rpx;

flex: 1;

}

.select_img {

width: 30rpx;

height: 20rpx;

display: block;

transition: transform 0.3s;

}

.select_img_rotate {

transform: rotate(180deg);

}

.option_box {

position: absolute;

top: 70rpx;

width: 100%;

border: 1px solid #efefef;

box-sizing: border-box;

height: 0;

overflow-y: auto;

border-top: 0;

background: #fff;

transition: height 0.3s;

}

.option {

display: block;

line-height: 40rpx;

font-size: 30rpx;

border-bottom: 1px solid #efefef;

padding: 10rpx;

}

wxml：

<view class='select_box'>

<view class='select' catchtap='selectTap'>

<text class='select_text'>{{selectData[index]}}</text>

<image class='select_img {{show&&"select_img_rotate"}}' src='../images/down.png'></image>

</view>

<view class='option_box' style='height:{{show?(selectData.length>5?300:selectData.length*60):0}}rpx;'>

<text class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</text>

</view>

</view>