Bootstrap-input-group

Question

I use bootstrap input-group in the text box, I want to have a label or input-group-addon over textarea , but due to the styling of the addon element, this does not look very good (especially on the right side).

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

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

I assume that I would like slightly rounded edges on the right side, as well as on the left, on the textarea tab, normal input is fine.

Answer 1

You can override the regular addition by adding a new class to textarea and applying some css changes to it:

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

and for 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 you use less or a compass, I would use variables instead of primes. In addition, you should add some browser compatibility properties (such as -webkit and -moz prefixes)

Real-time example: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview

Answer 2

What about: -

 .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> 

Answer 3

The default style for this element should not have correct non-rounded corners when it is placed in front of the input field and has rounded corners on the left when it is placed after the left field .. you can add them this way or create a class with these functions

Default style for addon-addon

 <span class="input-group-addon" style=" border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right: solid 1px #ccc;"> Description</span> 

use span, not div for addon