Html 引导输入组插件样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34351194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap input-group addon styling
提问by sch
I am using bootstrap's input-groupon a textarea, what I want is to have the label, or input-group-addonabove the textarea, but due to the styling of the 'addon' element it doesn't look very good (especially on the right side).
我input-group在 textarea 上使用引导程序，我想要的是标签，或者input-group-addon在textarea，但由于“插件”元素的样式，它看起来不太好（尤其是在右侧）。
How can I make the textarealook decent, using input-group?
我怎样才能使textarea看起来体面，使用input-group？
Exampleto see difference on <input>and <textarea>
查看<input>和的差异的示例<textarea>
I guess what I'd like is slightly rounded edges on the right side, like the one on the left, on the textareainput, the normal input is fine.
我想我想要的是右侧略微圆润的边缘，就像左侧的边缘一样，在textarea输入上，正常输入很好。
回答by MorKadosh
You can override the regular add-on by adding a new class to the textareaand apply some csschanges on it:
您可以通过向 中添加新类textarea并对其应用一些css更改来覆盖常规附加组件：
<div class="input-group-addon textarea-addon"> Description </div>
<textarea class="form-control" rows="5"></textarea>
and for the css:
对于 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 your'e using less or compass I'd use variables instead of plain numbers. In addition, you should add some browser compatibility properties (such as -webkit and -moz prefixes)
如果您使用较少或指南针，我会使用变量而不是普通数字。此外，您应该添加一些浏览器兼容性属性（例如 -webkit 和 -moz 前缀）
Live example: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview
回答by BenG
How about this:-
这个怎么样：-
.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>回答by scaisEdge
the default style for this element is not expected to have the right not rounded corners when placed before the input field and has rounded corners to the left when it is placed after the left field .. you can add them this way or create a class with these features Included and add the Element
此元素的默认样式在放置在输入字段之前时不会具有右侧而不是圆角，并且在放置在左侧字段之后时具有向左的圆角..您可以通过这种方式添加它们或创建一个类这些功能包括并添加元素
The input-group- addon default style don
input-group-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 and not div for addon
对插件使用 span 而不是 div
