如何在ngTagsInput中设置标签的颜色？
麦可
我想在项目中使用ng-tags-input。
我尝试根据数组中的颜色属性对象为每个标签设置不同的颜色。
这是我正在研究的pl子。
为此，我需要在ng-input模板中覆盖tag-item css类。
这是ng-input模板的示例：
<script type="text/ng-template" id="tag-template">
<div class="tags-input" ng-style="{background: data.color}">
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
在这一行中，我尝试覆盖tags-input css类：
<div class="tags-input" ng-style="{background: data.color}">
这是我得到的结果：
如您所见，左右边缘未着色。
知道我在做什么错吗？以及如何覆盖标签输入CSS类？
JB Nizet
如果查看标记，您会看到将背景颜色样式应用到的.tags-input div嵌入到li元素中，该元素的尾部和右侧填充为5px。这就是为什么颜色未应用在按钮的整个宽度上的原因。
因此，请确保在ng-tags-input样式表之后应用您自己的样式表，并覆盖一些CSS规则li以使不会填充，而具有背景颜色的div则具有填充：
/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
padding: 0;
height: 27px;
}
.tags-input {
padding: 0 5px;
border-radius: 2px;
}
这是修改您的plunkr来实现的目标。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在 ngTagsInput 中调用函数 - AngularJS
- 2
如何在iOS中设置标签栏中的图像而不是色调颜色？
- 3
如何在轴标签中获取颜色
- 4
如何在Gnuplot中设置线条旁边的标签，但包括线条的颜色
- 5
如何在Flutter中为下拉标签和下拉列表文本设置不同的颜色？
- 6
如何在 ios 中设置 Xamarin.forms 标签页未选中的图标和文本颜色
- 7
如何在MPAndroidChart中设置颜色？
- 8
Java：如何在子类中设置颜色？
- 9
如何在titleForHeaderInSection中设置颜色？-迅速
- 10
如何在QBarSet中设置条形的颜色？
- 11
如何在tabSpec文本中设置颜色？
- 12
如何在titleForHeaderInSection中设置颜色？-迅速
- 13
如何在 cgmutablepath 中设置形状的颜色？
- 14
如何在 MPAndroidChart 的 PieChart 中设置颜色
- 15
如何在 JButton 中设置文本颜色？
- 16
MPAndroidChart如何设置标签颜色？
- 17
ngTagsInput：如何在自动竞争中显示所有结果？
- 18
如何在HTML中设置标签的宽度？
- 19
如何在Rails中设置标签样式
- 20
如何在Rails中设置标签样式
- 21
如何在标签中设置捕获异常？
- 22
如何在nasm中设置标签地址
- 23
如何在Xfce中基于墙纸颜色设置背景颜色？
- 24
如何在标签布局中设置标签宽度？
- 25
如何在有/无焦点的情况下更改 ngTagsInput 的边框颜色？
- 26
如何在tvOS 13中更改标签的背景颜色？
- 27
如何在img标签中更改svg源的颜色？
- 28
如何在Mac的终端中更改活动标签的颜色？
- 29
如何在SwiftUI中更改标签项的颜色
我来说两句