如何更改文本框 (dijit/form/TextBox) 焦点颜色

How to Change TextBox (dijit/form/TextBox) Focus color

我试图创建扩展 dijit/form/TextBox 的 TextBoxEx。 TextBoxEx 覆盖 _onFocus(请参阅下面的代码)但 TextBox 不会更改背景颜色。它总是透明的。我有什么错?

define([
    "dojo/_base/declare", // declare
    "dijit/form/TextBox",
    "dojo/on",
    "dojo/_base/event",
    "dojo/dom-style"
], function(declare, TextBox, on, event, domStyle) {

    var widget = declare("common.TextBoxEx", [TextBox], {

        inputLanguage : '',
        focusColor : '#F5EC9B',
        selectOnClick : true,
        _onFocus: function(e){
            try{
                if(this.disabled || this.readOnly){ return; }
                this.inherited(arguments);
                this._updatePlaceHolder();
                var evt = document.createEvent("Events");
                if(this.inputLanguage == 'en'){
                    evt.initEvent   ('switchToEng', true, false);
                    window.dispatchEvent(evt);
                }
                else if(this.inputLanguage == 'th'){
                    evt.initEvent('switchToThai', true, false);
                    window.dispatchEvent(evt);
                }

                var dom = this.focusNode;
                var focusColor = this.focusColor;

                setTimeout(function() {
                    dom.select();
                    domStyle.set(dom, 'background-color', focusColor);

                }, 200);
            }
            catch(e){
                console.log(e)
            }
        },

    });

    return widget;
});

您实际上不需要这样设置背景颜色。只需使用 css 即可:

.myTextBoxClass.dijitTextBox.dijitFocused .dijitInputInner {
  background-color: gray;
}

只需将 .myTextBoxClass 更改为您输入文本框的 class。

使用 !important 以您自己的风格覆盖您的默认主题 CSS。这种类型的工作只能使用 CSS 来完成。