bootstrap输入组插件样式

Question

我input-group在textarea上使用bootstrap ,我想要的是标签,或者input-group-addon在上面textarea,但是由于'addon'元素的样式,它看起来不太好(特别是在右侧).

如何textarea使用input-group？

示例和看到<input>和的区别<textarea>

我想我想要的是右侧略微圆润的边缘,就像左边的那个,在textarea输入上,正常的输入很好.

Answer 1

您可以通过向其添加新类来覆盖常规加载项textarea并对其应用一些css更改:

<div class="input-group-addon textarea-addon"> Description </div>
<textarea class="form-control" rows="5"></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;
}

如果你使用较少或指南针,我会使用变量而不是普通数字.此外,您应该添加一些浏览器兼容性属性(例如-webkit和-moz前缀)

实例:http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr？p = preview