如何在Django中修改NumberInput组件宽度？size属性对其无效

嗨，这个问题我太熟了！之前在调整Django Admin表单组件宽度时也踩过同样的坑——问题根源在于浏览器对<input type="number">的size属性支持和普通文本框不一样，再加上Django Admin自带的CSS样式优先级更高，导致你设置的size='10'直接被覆盖了。

给你两个靠谱的解决办法：

方法一：直接用内联CSS指定宽度（快速局部生效） #

把size属性换成style，直接给NumberInput设置CSS宽度，这样浏览器会优先应用这个样式：

class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        # 用style指定具体宽度，比如80px，根据需求调整
        models.FloatField: {'widget': NumberInput(attrs={'style': 'width: 80px;'})},
        models.CharField: {'widget': TextInput(attrs={'size':'10'})},
    }

方法二：全局自定义Admin CSS（适合批量调整） #

如果你需要给所有NumberInput统一设置宽度，更推荐用自定义CSS的方式：

1. 在你的Django项目的模板目录下，创建admin/css/custom.css文件，添加以下样式：

input[type="number"] {
    width: 80px; /* 替换成你想要的宽度 */
}

2. 在你的ModelAdmin类里添加Media类，加载这个自定义CSS：

class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.FloatField: {'widget': NumberInput()},
        models.CharField: {'widget': TextInput(attrs={'size':'10'})},
    }

    class Media:
        css = {
            'all': ('admin/css/custom.css',)
        }

为什么size属性无效？ #

简单来说，HTML的size属性对于number类型的输入框，只是定义了"建议显示的字符数"，但现代浏览器（尤其是配合Django Admin的默认样式）会优先使用CSS的width属性来控制输入框宽度，而Admin自带的样式已经给number输入框设置了固定宽度，所以你的size设置被忽略了。

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