Need and example of styling of djextNameTextBox (Dojo Name Text Box) control - xpages

Question

Does anybody have any example of styling Dojo Name Text Box control on xPages.. (djextNameTextBox)
It seems it doesn't work when you try to set it up through Properties dialogue..
I want to change e.g. font, background color, hide border, change color of [x] sign, etc...

Answer 1

You can style the names with class .lotusFilter and the "x" with class .lotusClose.
Here is an example for styling
.lotusFilters a.lotusFilter {
background-color: rgb(255, 0, 0);
border-color: blue;
color: white;
}
.lotusFilters a .lotusClose {
color: white;
}

Answer 2

When you create a Dojo TextBox, it actually creates a few wrapper divs and other inner divs that each have their own functionality. A normal dijit/form/TextBox has this structure:
<div class="dijit dijitReset dijitInline dijitTextBox>
<div class="dijitReset dijitValidationContainer"> /*...Validation stuff here...*/</div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner"/>
</div>
</div>
I may have missed a few classes here or there but that's the general gist of what declaring a Dojo TextBox does. If you want to modify the inner textbox, you can add css for .dijitTextBox .dijitInputField and .dijitTextBox .dijitInputInner. If you want to make it specific to just this Dojo TextBox, then you can add a "class" attribute to your TextBox properties and then use css again. Here is an example of the css:
.dijitTextBox.myClass .dijitInputField {
width: 100px;
}
.dijitTextBox.myClass .dijitInputInner {
width: 100px;
font-size: 12px;
}