Question

我正在使用带有django-taggit的django-autocomplete-light。如果您按照文档进行集成非常简单：

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元素时，我发现我可能会使用一些隐藏的跨度，但目前还不清楚该怎么做。

我该怎么做？我应该编写自己的小部件还是有可以继承的东西？

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会有很大的帮助！

Django Autocomplete light＆amp; taggit - 结果的自定义样式

1 个答案:

A）无法覆盖CSS类

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