Django Autocomplete light & taggit - 结果的自定义样式

Question

我正在使用 django-autocomplete-light 和 django-taggit。如果您遵循文档，集成非常容易：

import autocomplete_light
from taggit.models import Tag
autocomplete_light.register(Tag)

和

class NewActivityForm(forms.ModelForm):
    tags = TagField(widget=TagWidget('TagAutocomplete'))
    [...]

这会呈现一个漂亮的内联样式小部件，您可以在其中键入并看到下面的自动完成列表 - 一切都很好。

但是，我的标签是彩色编码的，所以我需要自定义两件事：

a) 首先，在自动完成列表中，我需要自定义每个标签的 css 类。我对模板进行了一些控制，但似乎有 css 选择器在寻找覆盖我的类的 [data-value]。 autocomplete_template_html 的代码是：

<div>
    {% for choice in choices %}
        <span class="tag tag--{{choice.pk}}" data-value="{{choice.pk}}" >{{choice}}</span>
    {% endfor %}
</div>

b) 其次，一旦选择了一个标签并将其添加到我的输入中，我需要在那里维护该 css 类，以便获得自定义外观。当我看到生成的 DOM 元素时，我发现其中有一些我可以使用的隐藏 span，但不清楚该怎么做。

我该怎么做？我应该编写自己的小部件还是可以子类化一些东西？

Answer 1

A) 不能覆盖 CSS 类

看起来像CSS Specificity 问题。

我刚刚尝试过，如果在加载autocomplete_light/style.css（或“autocomplete_light/static.html”模板）之后设置，它就可以工作：

    .yourlabs-autocomplete .choice, .yourlabs-autocomplete [data-value], .yourlabs-autocomplete em
    {   
        color: red;
    }   

否则，你可以override autocomplete_light/static/autocomplete_light/style.css。

B) 选择选项时样式必须相同

当一个选项被选中时，它的 HTML 被复制到卡片组，只添加了span.remove。样式应该保留。

如果发布你的 CSS 会很有帮助！