Python Django简单验证码添加CSS

Python版本：3.6.0和Django版本：1.10.5

我阅读了所有关于Django simple captcha的文档，我发现这句话修改了captcha的呈现：

（用于默认设置为：u%（图像）s%（隐藏字段）s%（文本字段）s'）

我不想更改所有验证码的模式，我只需要更改当前验证码的模式，可能与其他字段一样，在forms.py中使用add attrs={}

工作的正规Syntax示例：

name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))

目前，我在呈现HTML中有类似的内容。 如果可能的话，我想要类似的东西

我在forms.py中使用：

class RegisterForm(forms.ModelForm):
    ...
    captcha = CaptchaField(label='Are you an human? ')

在page.html中：

<div class="fieldWrapper input-field col-xs-12">
    <i class="material-icons">person_pin</i>
    <label for="id_captcha">{{ form.captcha.label }}</label>
    {{ form.captcha }}
</div>

但它不起作用，因为captchafield（）生成的默认字段被另一个字段文本字段替换（验证码的id错误，或者我只有我的文本字段而没有图片）

因此，我继续寻找解决方案，并试图了解CaptchaField结构的组成：

captcha.__dict__
{'require_all_fields': True, 'required': True, 'label': 'Are you an human ? ', 'initial': None, 'show_hidden_initial': False, 'help_text': '', 'disabled': False, 'label_suffix': None, 'localize': False, 'widget': <captcha.fields.CaptchaTextInput object at 0x000001F929C16198>, 'creation_counter': 28, 'error_messages': {'required': <django.utils.functional.lazy.<locals>.__proxy__ object at 0x000001F9290A4828>, 'invalid': <django.utils.functional.lazy.<locals>.__proxy__ object at 0x000001F929C16E48>, 'incomplete': <django.utils.functional.lazy.<locals>.__proxy__ object at 0x000001F9290ED080>}, 'validators': [], 'fields': (<django.forms.fields.CharField object at 0x000001F929C16080>, <django.forms.fields.CharField object at 0x000001F929C167B8>)}

captcha.__dict__.keys()
dict_keys(['require_all_fields', 'required', 'label', 'initial', 'show_hidden_initial', 'help_text', 'disabled', 'label_suffix', 'localize', 'widget', 'creation_counter', 'error_messages', 'validators', 'fields'])

---

您好，您可以在模板中覆盖：

验证码/text_field.html

并将自定义类添加到text_field.html simple中的html代码中：

<input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="{{id}}_1" name="{{name}}_1" class="white-text" type="text" />

---

如果不想更改所有验证码的模式，可以使用变通方法。 由于默认情况下，验证码的显示方式如下：

<input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="id_captcha_1" name="captcha_1" type="text">

---

更新管理员登录的验证码css

创建文件模板/admin/css/base.css

然后在base.css中添加#id_captcha_1和captcha类

比如：

---

我不想更改所有验证码的模式，我只需要更改当前的验证码，可能与其他字段一样，在forms.py中使用add attrs={}。

我正试图找到一个正确的解决方案来编辑forms.py中的验证码

captcha.widget.widgets[1]
<django.forms.widgets.TextInput object at 0x000001F929C16EB8>

captcha.widget.widgets[1].__dict__
{'attrs': {}}

class BaseCaptchaTextInput(MultiWidget):
    """
    Base class for Captcha widgets
    """
    def __init__(self, attrs=None):
        widgets = (
            HiddenInput(attrs),
            TextInput(attrs),
        )
        super(BaseCaptchaTextInput, self).__init__(widgets, attrs)

<input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="{{id}}_1" name="{{name}}_1" class="white-text" type="text" />

<input autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="id_captcha_1" name="captcha_1" type="text">

#id_captcha_1{
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    }

#id_captcha_1{
margin-top: -26px;
margin-left: 98px;
height: 21px;
}

.captcha {
 padding-top: 22px
}