1

我正在使用 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 元素时，我发现其中有一些我可以使用的隐藏跨度，但不清楚该怎么做。

我怎样才能做到这一点？我应该编写自己的小部件还是可以子类化一些东西？

4

1 回答 1

1

A) 不能覆盖 CSS 类

它看起来像一个CSS 特异性问题。

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

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

否则，您可以直接覆盖autocomplete_light/static/autocomplete_light/style.css.

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

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

不过，如果发布您的 CSS 将会有很大帮助！

于 2014-01-16T01:07:35.543 回答