ブートストラップ入力グループアドオンスタイリング

Question

私は、テキストエリアにブートストラップのinput-groupを使用しています。ラベルが必要なのはinput-group-addonです。textareaの上にありますが、 'addon'要素のスタイリングにより、良い（特に右側）。

input-groupを使用してtextareaがまともな外観になるにはどうすればよいですか？ <input>と<textarea>

上の違いを見るために

Example私は私が好きなものを推測するが、わずかに右側のエッジを丸められ、左側の1のように、textarea入力の上、通常の入力で結構です。

Answer 1

あなたはtextareaに新しいクラスを追加することにより、定期的なアドオンを無効にし、その上にいくつかの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; 
} 

：

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

やCSSのをより少ないまたはコンパスを使用して私は単純な数値の代わりに変数を使用したいと思います。また は、あなたには、いくつかのブラウザの互換性プロパティを追加する必要があります（たとえば、-webkitと-moz接頭辞など）

ライブ例：http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=previewこの要素のデフォルトスタイルは時に右のない丸みを帯びた角を持つことが予想されていない

Answer 2

入力フィールドの前に配置され、左のフィールドの後ろに置かれたときに角が丸くなります。このように追加するか、またはこれらのフィーチャを含むクラスを作成することができます。

入力グループアドオンデフォルトスタイルドン

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

利用スパンではなく、このことについてどのようにアドオン

Answer 3

ためDIV： -

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