微信小程序使用<view>组件 + <cover-view>组件自定义下拉选择框的完整代码示例，包含了HTML、CSS和JS代码。

HTML代码：

<view class="dropdown-box" bindtap="showOption">
  <view class="dropdown-text">{{optionText}}</view>
  <view class="arrow"></view>
  <cover-view class="dropdown-option-box" wx:if="{{isShowOption}}">
    <cover-view class="dropdown-option" wx:for="{{options}}" wx:key="{{option}}" bindtap="selectOption">{{option}}</cover-view>
  </cover-view>
</view>

CSS代码：

.dropdown-box {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.dropdown-text {
  flex: 1;
  padding: 10px;
}

.arrow {
  width: 0;
  height: 0;
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: #999 transparent transparent transparent;
}

.dropdown-option-box {
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  overflow-y: auto;
  max-height: 200px;
}

.dropdown-option {
  padding: 10px;
}

.dropdown-option:first-of-type {
  border-top: 1px solid #ddd;
}

JS代码：

Page({
  data: {
    options: ['选项1', '选项2', '选项3'], // 选项数组
    optionText: '请选择', // 当前选中选项的文字
    isShowOption: false, // 是否展示选项
    selectedOptionIndex: -1 // 当前选中选项的索引
  },

  showOption: function() {
    this.setData({
      isShowOption: !this.data.isShowOption
    })
  },

  selectOption: function(e) {
    var index = e.currentTarget.dataset.index;
    var option = this.data.options[index];
    this.setData({
      optionText: option,
      selectedOptionIndex: index,
      isShowOption: false
    });
  }
})

在这个示例中，使用了一个<view>标签作为下拉框的容器，包含了选项框和下拉框箭头。选项框是一个<cover-view>标签，使用wx:if属性来控制其是否显示。选项框中是一个<cover-view>标签列表，使用wx:for属性遍历选项数组，每个选项都是一个<cover-view>标签，点击时调用selectOption方法，将选择的选项更新到optionText中，同时更新选中选项的索引和展开标志。

为了进行样式控制，还定义了一些CSS样式，主要用于控制下拉框的样式和布局。

需要注意的是，上述代码中使用了cover-view组件作为选项框的容器，其是覆盖在其他组件上面的，可以穿透下部组件接收点击事件，所以需要使用bindtap事件来处理选项的选择逻辑。