Iphone 选择引导输入区域时，显示下拉div

我试图让一个下拉框出现，只要你点击一个输入文本区域，显示更多的框（即信息完成）。 这是我的设计所基于的线框链接：

到目前为止，我已经使用了Bootstrap，但似乎无法成功添加下拉列表，如果有任何帮助/指导，我将不胜感激

<div id="popup3" class="popup">                
    <h3>Add your locations here</h2>
    <form role="form">
    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address"/>
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>    

    <div class="inner-addon right-addon">
      <i class="glyphicon glyphicon-camera"></i>
      <input type="text" class="form-control" placeholder="Address" />
    </div>

    <div class="form-group">
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
      <textarea class="form-control" rows="1" ></textarea>
     </div>
    </form>

 </div>

 <div id="popup4" class="popup">    
   <h3>Choose the categories that best define your drift</h3>
   <form role="form">
   <select multiple class="form-control" id="sel">
      <option>Art</option>
      <option>Entertainment</option>
      <option>History</option>
      <option>Landmarks</option>
      <option>Music</option>
      <option>Nature</option>
      <option>Oddities</option>
    </select>
    </form>
</div>

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }