how to add background color to input text if it is a dojo datepicker?

Question

I can't set the background color (or border color) of an input text, if it is a dojo datepicker. My dojo datepicker is an input text with the two additional attribute:

dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"

I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.

something like this does not work:

<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">

Any help is appriciated.

And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.

g00glen00b g00glen00b · Accepted Answer · 2013-07-25T12:13:15

Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.

Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.

The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:

<body class="claro custom">

</body>

Then define your style like:

.custom .dijitTextBox > .dijitInputField {
    background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
    background: red;
}

I also made an example JSFiddle.

how to add background color to input text if it is a dojo datepicker?

3 Answers