bootstrap input-group addon styling

Question

I am using bootstrap's input-group on a textarea, what I want is to have the label, or input-group-addon above the textarea, but due to the styling of the 'addon' element it doesn't look very good (especially on the right side).

How can I make the textarea look decent, using input-group?

Example to see difference on <input> and <textarea>

I guess what I'd like is slightly rounded edges on the right side, like the one on the left, on the textarea input, the normal input is fine.

Answer 1

You can override the regular add-on by adding a new class to the textarea and apply some css changes on it:

<div class="input-group-addon textarea-addon"> Description </div>
<textarea class="form-control" rows="5"></textarea>

and for the css:

.textarea-addon{
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 4px !important;
  border:1px solid #ccc !important;
  border-bottom: none !important;
}
textarea{
  border-top-left-radius:0px !important;
  border-top-right-radius:0px !important;
}

If your'e using less or compass I'd use variables instead of plain numbers. In addition, you should add some browser compatibility properties (such as -webkit and -moz prefixes)

Live example: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview

Answer 2

How about this:-

.row .form-group .input-group-addon {
  background-color: #eee;
  border-right: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom: 0;
}

.row .form-group textarea.form-control {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />

<div class="row" style="padding:30px 100px;">
  <div class="col-md-6">
      <div class="form-group">
        <div class="input-group-addon">Description</div>
        <textarea class="form-control" rows="5"></textarea>
      </div>
  </div>
</div>