Select field as input group addon

Question

I want to use a <select> field as a input group addon with Bootstrap3 somehow like this

 -------------------------------------
|   select v   |   input text field   |
 -------------------------------------

So I would assume to achieve this using the .input-group, .input-group-addon, and .form-control classes.

<div class="input-group">
    <select class="input-group-addon" id="protocol">
        <option>http://</option>
        <option>https://</option>
    </select>
    <input type="text" class="form-control" id="domain" aria-describedby="protocol">
</div>

(See bootply example)

But the .input-group-addon class doesn't seem to work for <select> items. It looks like this:

How can I fix to properly align this?

Answer 1

You just need to wrap your <select> by a <div> with class .input-group-addon like this

<div class="input-group">
  <div class="input-group-addon">
    <select class="" id="protocol">
      <option>http://</option>
      <option>https://</option>
    </select>
  </div>
  <input class="form-control" id="domain" aria-describedby="protocol" type="text">
</div>

Example