如何修改Odoo 16.0输入字段边框颜色？解决透明显示问题

在Odoo 16中，输入字段莫名呈现透明状态，只有点击字段（需大致定位位置）时才会显示下边框。
当前显示效果：

我目前采用给表单添加背景色、输入字段填充白色的临时方案，效果如下：

相关代码：

<form delete="false" default_order="name" style="background-color:#DDDDE4;">
    <field name="title" style="background-color:#ff0000;" placeholder="title"/>
    <field name="body" widget="html" style="background-color:#FFFFFF;" placeholder="body"/>
</form>

临时方案的合理性分析 #

这个方案能快速解决视觉可见性问题，但存在不少弊端：

• 内联样式会和Odoo原生CSS产生优先级冲突，后续版本升级或主题调整时容易出现样式错乱
• 每个字段单独设置样式，维护成本高，新增字段时需要重复添加样式代码
• title字段设置红色背景不符合常规UI设计规范，破坏整体界面一致性

更合理的解决方式 #

建议通过自定义全局CSS来统一处理，而非内联样式：

1. 给表单添加自定义类名：

<form class="custom-transparent-fix" delete="false" default_order="name">
    <field name="title" placeholder="title"/>
    <field name="body" widget="html" placeholder="body"/>
</form>

2. 在模块的static/src/css目录下创建custom_field_fix.css文件，写入：

.custom-transparent-fix {
    background-color: #DDDDE4;
}
.custom-transparent-fix .o_field_widget {
    background-color: #FFFFFF;
}
/* 单独调整html widget，避免冲突 */
.custom-transparent-fix .o_field_html {
    background-color: #FFFFFF;
}

3. 在模块的views/assets.xml中引入该CSS文件，确保加载在原生样式之后：

<odoo>
    <data>
        <template id="assets_backend" name="custom field fix assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/your_module_name/static/src/css/custom_field_fix.css"/>
            </xpath>
        </template>
    </data>
</odoo>

这种方式可以统一管理样式，避免内联样式的冲突问题，后续维护和扩展也更便捷。

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