Supported styles for different widgets

This table describes supported styles in Option 2CSS files. The value of length can be specified in px, pt, em, ex, cm, mm, and inch.
Table 1.
Style Description
Color the color property is used to set the color of the text. The value can be:
  • Hexadecimal color: #FF0000
  • RGB color: rgb(255,0,0)
  • Standard colors: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Background-color specifies the background color of an element. The value can be:
  • Hexadecimal color: #FF0000
  • RGB color: rgb(255,0,0)
  • Standard colors: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Font include font-family, font-size, font-style, font-weight.
  • The font-size can be specifies in: px, em, pt, cm, mm, inch, xx-small, x-small, small, medium, large, xx-large.
  • The font-style support: normal, italic.
  • The font-weight support: normal, bold, bolder (same as bold), lighter (same as normal), 100~500 (same as normal), 600~900 (same as bold)
Margin the margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
  • margin: 10px 5px 15px 20px; – set margin top, right, bottom, left with different value
  • margin: 10px; – set margin top, right, bottom, left with same value
  • margin: 10px 20px; – set top and bottom side with 10px, left and right side with 20px
  • margin: 10px 20px 30px; – set top side with 10px, left and right side with 20px, bottom side with 30px;
  • margin-top:10px; – set top side margin
  • margin-right:10px; – set right side margin
  • margin-bottom:10px; – set bottom side margin
  • margin-left:10px; – set left side margin
Padding the padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
  • padding: 10px 5px 15px 20px; – set padding top, right, bottom, left with different value
  • padding: 10px; – set padding top, right, bottom, left with same value
  • padding: 10px 20px; – special top and bottom side with 10px, left and right side with 20px;
  • padding: 10px 20px 30px; special top side with 10px, left and right side with 20px, bottom side 30px;
  • padding-top:10px; – specify top side padding
  • padding-right:10px; – specify right side padding
  • padding-bottom:10px; – specify bottom side padding
  • padding-left:10px; – specify left side padding
border The border style property specifies what kind of border to display.
  • Border width: the width of each border
  • Border style: solid, dashed, dotted, double, none, hidden.
  • Color: border’s color can be
    • Hexadecimal color: #FF0000
    • RGB color: rgb(255,0,0)
    • Standard colors: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
Width set the width of an element.Width & Height properties can be set from the property view.
Height set the height of an element.Width & Height properties can be set from the property view.
Those CSS styles in Table 1 are not all supported in different widgets and should be defined following strict standard in Option 2 CSS files. Otherwise, those styles will be ignored.
Panel, Form, Image
All properties are supported and should be defined under root selector.
Group
All properties are supported.
The padding, width and height properties should be defined under
.<selectorName>.dijitGroupBase
Other styles should be defined under the root selector.
CheckBox, Radio, Label, Link
All properties are supported.
The width & height should be defined under
.<selectorName>.dijitLabelBase
Other properties should be defined under root selector.
TabbedPane
All properties except border/width/height are supported.
These supported properties are working in content pane, not tab.
  • Background-color should be defined under
    .<selectorName>.dijitTabContainer.dijitTabContainerTop-container .dijitContentPane
  • Padding property should be defined under
    .<selectorName>.dijitTabContainer .dijitTabContainerTop-container .dijitContentPane
  • Other properties should be defined under the root selector
For tab
Note: The properties for tab is only working in tooling. They should be defined in Option 1CSS file. For example,
  • Font color should be defined under "BTTTabColor" instead of this property
    .<selectorName>.dijitTabInnerDiv.dijitTabContent
  • Background-color property for active tab should be defined under "BTTActiveTabBackgroundColor" instead of this property
    .<selectorName>.dijitTabContainer .dijitTabListContainer-top .dijitTabContainerTopNone .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent
Button
All properties for the button widget should be defined under
.<selectorName>.dijitButton .dijitButtonNode
text box
All properties are supported.
Border, width, background-color styles should be defined under
.<selectorName>.dijitTextBox
Padding should be defined under
.<selectorName>.dijitTextBox .dijitInputContainer
Other styles can be defined under the root selector.
text area
All properties should be defined under
.<selectorName>.dijitTextArea
Rich Text
All properties except padding are supported.
The border, background-color should be defined under
.<selectorName>.dijitEditor
The background-color should be defined under
.<selectorName>.dijitEditor .dijitEditorIFrameContainer .dijitEditorIFrame
.<selectorName>.dijitEditor .dijitEditorIFrameContainer
Other properties should be defined under the root selector.
Table
All properties except padding are supported.
Border, width, height, font-family properties should be defined under
.<selectorName>.dojoxGrid
background-color should be defined under
.<selectorName>.dojoxGridCell
and
.<selectorName>.dojoxGridRow
and
.<selectorName>.dojoxGrid .dojoxGridMasterView .dojoxGridView .dojoxGridScrollbox
Other properties should be defined under the root selector.
tree
All properties are supported.
Font and Color should be defined under the root selector.
Other properties should be defined under
.<selectorName>.dijitTree
Combo, Select List
All properties are supported.
Border, Width, and Height styles should be defined under
 .<selectorName>.dijitTextBox
The background-color should be defined under
.<selectorName>.dijitComboBox
The padding should be defined under
.<selectorName>.dijitTextBox .dijitInputField 
Color, font, and margin should be defined under the root selector.