CSS Filters
Below you will be able to see the different filters available with CSS.
| Color Displayed | Color Name | Description | Code Example |
| activeborder | Active Window Border | style="background-color: activeborder" | |
| activecaption | Active Window Caption | style="background-color: activecaption" | |
| appworkspace | Background Color of MDI Applications | style="background-color: appworkspace" | |
| background | Desktop Background | style="background-color: background" | |
| buttonface | Button Face | style="background-color: buttonface" | |
| buttonhighlight | Button Highlight | style="background-color: buttonhighlight" | |
| buttonshadow | Button Shadow | style="background-color: buttonshadow" | |
| buttontext | Button Text | style="background-color: buttontext" | |
| captiontext | Caption Text | style="background-color: captiontext" | |
| graytext | Disabled Text | style="background-color: graytext" | |
| highlight | Highlight | style="background-color: highlight" | |
| highlighttext | Highlight Text | style="background-color: highlighttext" | |
| inactiveborder | Inactive Window Border | style="background-color: inactiveborder" | |
| inactivecaption | Inactive Window Caption | style="background-color: inactivecaption" | |
| inactivecaptiontext | Inactive Caption Text | style="background-color: inactivecaptiontext" | |
| infobackground | Tooltip Background Color | style="background-color: infobackground" | |
| infotext | Tooltip Text | style="background-color: infotext" | |
| menu | Menu Background | style="background-color: menu" | |
| menutext | Menu Text | style="background-color: menutext" | |
| scrollbar | Scrollbar background | style="background-color: scrollbar" | |
| threeddarkshadow | Dark Shadow for 3D Elements | style="background-color: threeddarkshadow" | |
| threedface | Face Color for 3D Elements | style="background-color: threedface" | |
| threedhighlight | Highlight Color for 3D Elements | style="background-color: threedhighlight" | |
| threedlightshadow | Light Shadow for 3D Elements | style="background-color: threedlightshadow" | |
| threedshadow | Shadow for 3D Elements | style="background-color: threedshadow" | |
| window | Window Background | style="background-color: window" | |
| windowframe | Window Frame | style="background-color: windowframe" | |
| windowtext | Window Text | style="background-color: windowtext" |
Font Settings
| Font Displayed | Font Name | Description | Code Example |
| AaBbCcDd | caption | Font Used for Window Captions | style="font: caption" |
| AaBbCcDd | icon | Font Used to Label Icons | style="font: icon" |
| AaBbCcDd | menu | Font Used in Menus | style="font: menu" |
| AaBbCcDd | message-box | Font Used in Dialog Boxs| style="font: message-box" |
|
| AaBbCcDd | small-caption | Font Used for Tool Window Captions | style="font: small-caption" |
| AaBbCcDd | status-bar | Font Used for Status Bars | style="font: status-bar" |
Cursor Settings
| Cursor Name | Description | Code Example |
| all-scroll | IE 6.0 or later. Arrows pointing up, down, left, and right with a dot in the middle, indicating that the page can be scrolled in any direction. | style="cursor: all-scroll" |
| auto | Browser determines which cursor to display based on the current context. | style="cursor: auto" |
| col-resize | IE 6.0 or later. Arrows pointing left and right with a vertical bar separating them, indicating that the item/column can be resized horizontally. | style="cursor: col-resize" |
| crosshair | Simple cross hair. | style="cursor: crosshair" |
| default | Platform-dependent default cursor; usually an arrow. | style="cursor: default" |
| hand | Hand with the first finger pointing up, as when the user moves the pointer over a link. | style="cursor: hand" |
| help | Arrow with question mark, indicating help is available. | style="cursor: help" |
| move | Crossed arrows, indicating something is to be moved. | style="cursor: move" |
| no-drop | IE 6.0 or later. Hand with a small circle with a line through it, indicating that the dragged item cannot be dropped at the current cursor location. | style="cursor: no-drop" |
| not-allowed | IE 6.0 or later. Circle with a line through it, indicating that the requested action will not be carried out. | style="cursor: not-allowed" |
| pointer | Hand with the first finger pointing up, as when the user moves the pointer over a link. Identical to hand. | style="cursor: pointer" |
| progress | IE 6.0 or later. Arrow with an hourglass next to it, indicating that a process is running in the background. User interaction with the page is unaffected. | style="cursor: progress" |
| row-resize | IE 6.0 or later. Arrows pointing up and down with a horizontal bar separating them, indicating that the item/row can be resized vertically. | style="cursor: row-resize" |
| text | Editable text; usually an I-bar. | style="cursor: text" |
| url(uri) | IE 6.0 or later. Cursor is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types. | style="cursor: url('../cursors/metronom.ani')" |
| vertical-text | IE 6.0 or later. Editable vertical text, indicated by a horizontal I-bar. | style="cursor: vertical-text" |
| wait | Hourglass or watch, indicating that the program is busy and the user should wait. | style="cursor: wait" |
| *-resize | Arrows, indicating an edge is to be moved; the asterisk (*) can be N, NE, NW, S, SE, SW, E, or W—each representing a compass direction. | |
| n-resize | style="cursor: n-resize" | |
| s-resize | style="cursor: s-resize" | |
| e-resize | style="cursor: e-resize" | |
| w-resize | style="cursor: w-resize" | |
| ne-resize | style="cursor: ne-resize" | |
| nw-resize | style="cursor: nw-resize" | |
| se-resize | style="cursor: se-resize" | |
| sw-resize | style="cursor: sw-resize" |