字形的引导样式为按钮

Question

I'm building a page with a series of inputs. One of them is a select list of email addresses. I'm including a Plus glyph at the right end of the list as a button to invoke some javascript that will add additional select lists for more recipients.

I've spent quite a bit of time trying to do this without the results I was hoping for. The best I can do is this code example. If you click directly on the plus, you get the result. However, I wish that the entire square surrounding the glyph was clickable instead - not unlike a button. Any suggestions? Thank you!

<div class="form-group">
  <label for='the_user_email' class='col-sm-2 control-label' style='padding-right: 0px;'>Requested By</label>
  <div class='col-sm-6'>
    <div class="input-group" id="add_emails_event">
      <select class='form-control' name='the_user_email' id='the_user_email'>
        <option value='user1@domain.com'>user1@domain.com
        <option value='user2@domain.com'>user2@domain.com
      </select>
      <span class="input-group-addon"><a onclick="add_email();"><span class="glyphicon glyphicon-plus"></span></a></span>
    </div>
  </div>
</div>

Answer 1

You can solve this by using a button.

    <div class="form-group">
  <label for='the_user_email' class='col-sm-2 control-label' style='padding-right: 0px;'>Requested By</label>
  <div class='col-sm-6'>
    <div class="input-group" id="add_emails_event">
      <select class='form-control' name='the_user_email' id='the_user_email'>
        <option value='user1@domain.com'>user1@domain.com
        <option value='user2@domain.com'>user2@domain.com
      </select>
      <span class="input-group-btn"><button onclick="add_email();" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></span>
    </div>
  </div>
</div>