使用css3设置下拉菜单

Question

以下代码看起来不错，几乎可以使用

select{
   width:218px;
   background-color: #000;
   border:none;
   outline: none;
   color:#333; 
   -webkit-appearance:none;
   height:24px;
   border-radius: 0;
   -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}

.selcet_wrapper{
   background:url(../image/contact_arrow.png) no-repeat 96% 0;
   background-size: 21px 24px;
   overflow: hidden;
   -webkit-border-top-right-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   width:21px;
   height:24px;

}

<div class="selcet_wrapper">
  <select name="how" id="how">
  <option selected="selected" value="audi">What is your enquiry regarding?</option>
  <option value="volvo">one</option>
  <option value="saab">two</option>
  <option value="vw">three</option>
  </select>
</div> 

当我点击bg图像时，下拉列表没有显示，我知道这是因为它没有包含在select元素中，是否有办法解决这个问题？