Django表单URLField输入框样式不生效该如何解决？

问题根因 #

Django的URLField默认会渲染为<input type="url">类型的输入框，大多数情况下你的.input样式规则仅适配了type="text"的输入框，所以即使URL输入框已经带上了input类，也不会匹配到对应的样式。

排查步骤 #

先右键点击样式未生效的URL输入框，选择「检查」查看元素属性：

• 若输入框标签上已经带有class="input"属性，说明是CSS规则适配问题，优先用方法1解决
• 若输入框标签上没有class="input"属性，说明Form类的属性赋值逻辑未覆盖到该字段，用方法2或方法3解决

解决方法 #

方法1：修改CSS适配规则（最推荐）

找到项目中定义.input类的CSS文件，将限定type="text"的规则调整为覆盖所有input类型：
修改前示例：

input[type="text"].input {
  /* 原有样式规则 */
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  border-radius: 4px;
}

修改后：

/* 匹配所有带input类的input标签，覆盖text、url、email、number等所有类型 */
input.input {
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  border-radius: 4px;
}

如果需要单独控制不同类型输入框的样式，也可以单独补充URL类型的适配规则：

input[type="url"].input {
  /* 保持和text类型完全一致的样式即可 */
  border: 1px solid #e5e7eb;
  padding: 6px 12px;
  border-radius: 4px;
}

方法2：在Form层统一修改URL输入框属性

如果你不需要浏览器自带的URL格式校验功能，也可以直接在Form初始化时将URL输入框的类型改为普通文本框，和其他字段保持一致：
修改forms.py中的__init__方法：

def __init__(self, *args, **kwargs):
    super(ProfileForm, self).__init__(*args, **kwargs)
    for name, field in self.fields.items():
        field.widget.attrs.update({"class": "input"})
        # 额外将URL类型输入框改为普通文本框
        if field.widget.input_type == 'url':
            field.widget.input_type = 'text'

方法3：模板渲染时强制绑定样式类

也可以直接在模板层手动指定字段的class属性，避免Form层赋值失效的问题：
将模板中{{ field }}部分修改为：

{{ field.as_widget(attrs={"class": "input"}) }}

内容的提问来源于stack exchange，提问作者zain