I needed something like monetary field to show unit of value.  1kg 0.3IU etc. so far ok. this is done.

when I tried to add colors into foreground. I loose state and can't push color attributes in to field.

i only have style= but nothing else. code is below, any advice appreciated. thanks.

widgets.js

(function() {

var instance = openerp;
var _t = instance.web._t;


instance.web.form.FieldNutrient = instance.web.form.FieldFloat.extend({
    template: "FieldNutrient",
    widget_class: 'oe_form_field_float oe_form_field_nutrient',
    init: function() {
        this._super.apply(this, arguments);

        _nutrient = {
            'value': this.get_value(),
            'unit': null,
            'digits': [16, 2],
            'position': 'after',
            'range': 0.05,
            'color_low': '#c02c2c',
            'color_high': '#c02c2c',
            'color_ok': '#078B01',
            'color': 'color:#078B01'
        };

        if (this.options.unit) {
            _nutrient.unit = this.options.unit;
        }

        if (this.options.position) {
            _nutrient.position = this.options.position;
        }

        if (this.options.digits) {
            if (this.options.digits.length === 1) {
                this.digits = _nutrient.digits = [16, this.options.digits];
            } else {
                this.digits = _nutrient.digits = this.options.digits;
            }
        }

        this.set({"nutrient": _nutrient});
        this.on("change:nutrient", this, this.get_color);
        this.get_color();
    },
    start: function() {
        var tmp = this._super();
        this.on("change:nutrient", this, this.reinitialize);
        return tmp;
    },
    get_color: function() {
        _nutrient = this.get('nutrient');

if (_nutrient.value < 0) {
    this.color = _nutrient.color = ''.concat('color:', _nutrient.color_low);
} else {
    this.color = _nutrient.color = ''.concat('color:', _nutrient.color_ok);
}

        this.set({"nutrient": _nutrient});
    },
,
render_value: function() {
    var show_value = this.format_value(this.get('value'), '');
    if (!this.get("effective_readonly")) {
        this.$el.find('input').val(show_value);
    } else {
        if (this.password) {
            show_value = new Array(show_value.length + 1).join('*');
        }
        var char_content = this.$(".oe_form_char_content").text(show_value);
        if (this.color) {
            var _nutrient = this.get('nutrient');
            _nutrient.value = this.get('value');
            this.set({'nutrient': _nutrient});
            this.get_color();
            char_content.parent().css('color', this.color);
        }
    }
},
    parse_value: function(val, def) {
        return instance.web.parse_value(val, {type: "float", digits: this.digits}, def);
    },
    format_value: function(val, def) {
        return instance.web.format_value(val, {type: "float", digits: this.digits}, def);
    }
});

instance.web.form.widgets = instance.web.form.widgets.extend({
    'nutrient': 'instance.web.form.FieldNutrient'
});

})();

widgets.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="FieldNutrient" t-extend="FieldChar">
    <t t-jquery="t:first" t-operation="before">
        <t t-if="widget.get('nutrient') and widget.get('nutrient').unit and widget.get('nutrient').position === 'before'">
            <t t-esc="widget.get('nutrient').unit"/>
        </t>
    </t>
    <t t-jquery="t:last" t-operation="after">
        <t t-if="widget.get('nutrient') and widget.get('nutrient').position and widget.get('nutrient').position === 'after'">
            <t t-esc="widget.get('nutrient').unit"/>
        </t>
    </t>
</t>

</templates>

form_view.xml where field is called. widget parameters coming from options, hard-coded.

definition of fields:

dry_matter: float

amount_ingr_dry: float, computed

diff_ingry_dry: float, computed

<tr>
    <td><label for="dry_matter"/></td>
    <td><field name="dry_matter" class="oe_text_right" readonly="1" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>
    <td><field name="amount_ingr_dry" class="oe_text_right" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>
    <td><field name="diff_ingr_dry" class="oe_text_right" widget='nutrient' options="{'unit': 'kg', 'digits': [16,2], 'position': 'after'}"/></td>
</tr>

any ideas?

edit: ok i got the colors and units as needed. but left unit optional for now. added new column next to it to make it more readable.     

next one. to refer need value in widget, compare it with diff to get the colors properly defined by range. green red orange blue etc etc.