Question

版本Python：3.6.0和版本Django：1.10.5

我阅读了有关Django-simple-captcha的所有文档，我只是发现这句话来修改验证码的渲染：

（用于默认为：u'％（image）s％（hidden_field）s％（text_field）s'）

我不想更改所有验证码的模式，我只需要更改当前验证码，也可以添加 attrs = {} <. em>在forms.py中与其他字段一样。

工作的常规语法示例：

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

目前，我在渲染HTML中有类似Captcha : img + textfield的内容。如果有可能我想要the documentation。

我在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渲染是3个不同的字段，HTML渲染默认为（浏览器中的代码）：

<img src="/captcha/image/f5dc943d14ecb5674a1490468567bcb186178228/" alt="captcha" class="captcha"> <input id="id_captcha_0" name="captcha_0" type="hidden" value="f5dc943d14ecb5674a1490468567bcb186178228"> <input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text">

我试图找到在小部件验证码中使用参数“attrs”为文本字段添加CSS的可能性，就像其他Django字段一样。所以我在form.py中尝试类似的东西：

captcha = CaptchaField(label='Are you an human? ', widget=forms.TextInput(attrs={'class':'white-text'}))

但是它不起作用，因为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'])

所以我搜索在我的TextInput字段中添加“attrs”参数：

captcha.widget.widgets[1] <django.forms.widgets.TextInput object at 0x000001F929C16EB8> captcha.widget.widgets[1].__dict__ {'attrs': {}}

现在我尝试修改构造渲染的字段TextInput的attrs，所以我看到构建3个字段的MultiWidget on the doc：

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

Answer 1

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

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

您可以使用“id_captcha_1”并编写自定义css代码，例如：

#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;
    }

Answer 2

您可以在模板中覆盖：

验证码/ 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" />

refrence to documention

Answer 3

更新验证码css以进行管理员登录

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

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

喜欢：

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

.captcha {
 padding-top: 22px
}

Django-Simple-Captcha添加CSS

3 个答案: