Bootstrap输入框组附加样式设计

Question

我正在使用bootstrap的input-group在一个文本区域上，我想要的是将标签或input-group-addon放在textarea上方，但由于'addon'元素的样式，它看起来不太好（特别是在右侧）。

如何使用input-group使textarea看起来像样？ 示例显示了<input>和<textarea>之间的差异。

我猜我想要的是在右侧略微圆润的边缘，就像左侧的那个，在textarea输入中，普通输入没问题。

- sch

---

请更加明确，你期望什么？ - J Santosh

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

- MorKadosh

Answer 2

这个怎么样：-

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

- BenG

Answer 3

这个元素的默认样式不会在放置在输入字段之前时具有正确的非圆角，而在放置在左侧字段之后时具有左侧的圆角。您可以通过以下方式添加它们，或者创建一个包含这些特征的类并添加元素。

输入组插件的默认样式不包括在内。

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

使用span而不是div作为附加组件。

- ScaisEdge