html - Bootstrap 输入组插件样式

Question

我正在使用 Bootstrap 的 input-group在 textarea 上，我想要的是有标签，或者 input-group-addon在 textarea 之上，但由于“插件”元素的样式，它看起来不太好(尤其是在右侧)。

如何制作 textarea看起来不错，使用 input-group ？

Example查看 <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;
}

如果您使用 less 或 compass，我会使用变量而不是纯数字。此外，您应该添加一些浏览器兼容性属性(例如-webkit 和-moz 前缀)

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