Here is current master style sheet - styles of intrinsic controls.
html { behavior: accesskeys; } form { behavior:form; } /* hyperlinks */ a:link { text-decoration:underline; color:blue; cursor:pointer; behavior:hyperlink; } a:link:focus { text-decoration:double-underline; } a:link:hover { color:red; } a:link:active { text-decoration:none; } a:link:tab-focus { outline-width:1px; outline-offset:0px; outline-style:dotted; } //popup[role="overflow-tooltip"] { white-space:nowrap; overflow:none; width:max-intrinsic; height:max-intrinsic;} /* edit box and numeric input*/ /* widget { color:windowtext; } */ input[type="hidden"] { display:none; } fieldset { background-image:url(theme:groupbox-normal); background-repeat:stretch; } fieldset > legend { background-color:threedhighlight; padding: 2px 4px; } widget[type="text"], input[type="text"], input[type="password"], input[type="decimal"], input[type="currency"], input[type="url"], input:not([type]) { style-set: "std-edit"; } @set std-edit { :root { font:system; color:windowtext; padding:3px; height:1em; width:1em; background-image:url(theme:edit-normal); background-repeat:stretch; min-width: min-intrinsic; min-height: min-intrinsic; text-align: left; cursor:text; overflow:hidden; white-space: nowrap; behavior:edit; context-menu:url(res:behavior-edit-menu.htm); } :root:disabled { background-image:url(theme:edit-disabled); color:graytext; /*cursor:default;*/ } :root[type="password"] { behavior:password; } :root[type="decimal"] { text-align: right; behavior:decimal; } :root[type="currency"] { text-align: right; behavior:currency; } :root[type="url"] { behavior:url; } :root[invalid] { color:red; } } widget[type="number"], input[type="number"] { style-set: "std-number-edit"; } @set std-number-edit { :root { text-align: right; behavior:number; font:system; color:windowtext; padding:3px; height:1em; width:1em; background-image:url(theme:edit-normal); background-repeat:stretch; min-width: min-intrinsic; min-height: min-intrinsic; cursor:text; overflow:hidden; white-space: nowrap; flow:vertical; } :root:disabled { background-image:url(theme:edit-disabled); color:graytext; /*cursor:default;*/ } :root[invalid] { color:red; } :root > button.minus { padding:0; transition:none; margin: 0 -2px -2px *; //margin-left:*; background-image:url(theme:v-spin-minus-normal); background-repeat:stretch; width:system-scrollbar-width; height:50%%; } :root > button.minus:hover { background-image:url(theme:v-spin-minus-hover); } :root > button.minus:active { background-image:url(theme:v-spin-minus-pressed); } :root > button.minus:disabled { background-image:url(theme:v-spin-minus-disabled); } :root > button.plus { padding:0; //margin: system-border-width system-border-width 0 *; //margin-left:*; margin: -2px -2px 0 *; transition:none; background-image:url(theme:v-spin-plus-normal); background-repeat:stretch; width:system-scrollbar-width; height:50%%; } @media handheld { :root { padding:3px; flow:horizontal; } :root > button.plus { height:100%%; margin: -3px 0px -3px *; } :root > button.minus { height:100%%; margin: -3px -3px -3px -1px; } } :root > button.plus:hover { background-image:url(theme:v-spin-plus-hover); } :root > button.plus:active { background-image:url(theme:v-spin-plus-pressed); } :root > button.plus:disabled { background-image:url(theme:v-spin-plus-disabled); } } /* text button */ widget[type="button"], input[type="button"], input[type="reset"], input[type="submit"], button { style-set: "std-button"; } @set std-button { :root { font:system; color:windowtext; padding:4px 8px; white-space: nowrap; behavior:button; background-repeat:stretch; background-image:url(theme:button-normal); cursor:default; } :root[role="default-button"] { background-image:url(theme:button-defaulted); } :root:hover { background-image:url(theme:button-hover); transition: blend; } :root:active { background-image:url(theme:button-pressed); } :root:active > * { position:relative; left:1px; top:1px; } :root:disabled { background-image:url(theme:button-disabled); color:graytext; } :root:tab-focus { //outline:1px dotted invert -4px; /* inside */ outline:1px dotted -4px; /* inside */ } @media handheld { :root:tab-focus { outline:1px solid -2px highlight; } :root:hover { transition:none; color:highlighttext } } } /* radio button */ input[type="radio"], button[type="radio"], widget[type="radio"] { style-set:"std-radio"; } @set std-radio { input:root { padding:0px; height:system-small-icon-height; width:system-small-icon-width; vertical-align:middle; behavior:radio; background-repeat:no-repeat; background-position:50% 50%; background-image:url(theme:radio-normal); cursor:default; } :root:not(input) { padding:4px 4px 4px system-small-icon-width; behavior:radio; background-repeat:no-repeat; background-position:1px 50%; background-image:url(theme:radio-normal); //text-decoration:underline; vertical-align:baseline; text-align:left; white-space:nowrap; cursor:pointer; } :root:not(input):rtl { padding:4px system-small-icon-width 4px 4px; background-position-right:1px; background-position-left:auto; } :root:hover { background-image:url(theme:radio-hover); } :root:active { background-image:url(theme:radio-pressed); } :root:disabled { background-image:url(theme:radio-disabled); color:graytext; } :root:checked { background-image:url(theme:radio-checked-normal); } :root:checked:hover { background-image:url(theme:radio-checked-hover); } :root:checked:active { background-image:url(theme:radio-checked-pressed); } :root:checked:disabled { background-image:url(theme:radio-checked-disabled); color:graytext; } :root:tab-focus { outline:1px dotted invert -1px; /* inside */ } @media handheld { :root:tab-focus { outline:1px solid -1px highlight; } } } /* checkbox button */ input[type="checkbox"], widget[type="checkbox"], button[type="checkbox"] { style-set: "std-checkbox"; } @set std-checkbox { input:root { padding:0px; height:system-small-icon-height; width:system-small-icon-width; behavior:check; background-repeat:no-repeat; background-position:50% 50%; background-image:url(theme:check-normal); cursor:default; vertical-align:middle; } :root:not(input) { padding:4px 4px 4px system-small-icon-width; behavior:check; background-repeat:no-repeat; background-position:1px 50%; background-image:url(theme:check-normal); text-decoration:underline; cursor:pointer; white-space:nowrap; style-set: "std-checkbox"; vertical-align:baseline; } :root:not(input):rtl { padding:4px system-small-icon-width 4px 4px; background-position-right:1px; background-position-left:auto; } :root:hover { background-image:url(theme:check-hover); } :root:active { background-image:url(theme:check-pressed); } :root:disabled { background-image:url(theme:check-disabled); color:graytext; } :root:checked { background-image:url(theme:check-checked-normal); } :root:checked:hover { background-image:url(theme:check-checked-hover); } :root:checked:active { background-image:url(theme:check-checked-pressed); } :root:checked:disabled { background-image:url(theme:check-checked-disabled); color:graytext; } :root:tab-focus { outline:1px dotted invert -1px; } @media handheld { :root:tab-focus { outline:1px solid -1px highlight; } widget:root, button:root { text-decoration:none; } } } button[type="selector"] { style-set: "std-selector"; } @set std-selector < std-button { :root { behavior:popup-selector; padding-right:14px; /* room for the arrow */ foreground-image:url(stock:arrow-down); /* that arrow */ foreground-repeat: no-repeat; foreground-position-top: 50%; foreground-position-right: 3px; } :root:active { padding:5px 13px 3px 9px; foreground-position-top: 55%; foreground-position-right: 2px; } :root > menu { display:none; } } input[type="progress"], widget[type="progress"] { behavior:progress; background-repeat:stretch; background-image:url(theme:h-progress-back); height: 1.2em; width: 8em; padding: 3px; foreground-repeat:stretch; foreground-image:url(theme:h-progress-chunk); } /* select (not dropdown) */ select[type="select"], widget[type="select"], popup[type="select"] { style-set: "std-select"; } @set std-select { :root { font:system; behavior:select; overflow-x:hidden; overflow-y:auto; padding:2px; background-repeat:stretch; background-image:url(theme:edit-normal); width: max-intrinsic; height: max-intrinsic; } :root:disabled { overflow:hidden; background-image:url(theme:edit-disabled); color:graytext; } optgroup > caption { padding:3px 3px; font-weight:bold; color: graytext; } option { padding:1px 1px 1px 3px; color: windowtext; min-height:1em; width: 100%%; white-space: nowrap; } option:rtl { padding:1px 3px 1px 1px; } option:checked { background-color:threedface; color:windowtext; } :root:focus option:current, popup:root option:current { background-color:highlight; color:highlighttext; } optgroup > option { padding-left:19px; } optgroup > option:rtl { padding-right:19px; padding-left:0; } options { padding-left:32px; foreground-repeat: no-repeat; foreground-position: 3px 3px; width: 100%%; min-height:1em; } options:rtl { padding-right:32px; padding-left:0; foreground-position-right: 3px; foreground-position-left: auto; } options:has-children:collapsed { foreground-image:url(theme:tree-view-glyph-closed); } options:has-children:expanded { foreground-image:url(theme:tree-view-glyph-open); } /* if it has less or equal to one child (first one is a caption) then no icon shall be shown */ //options:not(:has-children):expanded { foreground-image:none; } /* all elements in the options by default are non-visible */ options > * { visibility:collapse; } /* elements in open options are visible */ options:expanded > * { visibility:visible; } /* options caption element, always visible */ options > :first-child { padding:1px 1px 1px 3px; visibility:visible; width: 100%%; white-space: nowrap; margin-left:-16px; } options > :first-child:rtl { padding:1px 3px 1px 1px; margin-right:-16px; margin-left:0; } options:current > :first-child { background-color:threedlight; color:windowtext; } :root:focus options:current > :first-child { background-color:highlight; color:highlighttext; } } /* simple multiselect (without check boxes) */ select[type="select"][multiple=""], widget[type="select"][multiple=""] { style-set: "std-select-multiple"; } @set std-select-multiple < std-select { :root { background-color:transparent; color:windowtext; } option { padding:1px 1px 1px 3px; padding-left:1.6em; background-color:transparent; color:windowtext; } option:rtl { padding:1px 3px 1px 1px; padding-right:1.6em; background-color:transparent; color:windowtext; } option:checked { list-style-type:disc; display:list-item; background-color:threedface; color:windowtext; } :root:focus option:current { background-color:highlight; color:highlighttext; } } /* multiselect with check boxes */ select[type="select"][multiple="checks"], widget[type="select"][multiple="checks"] { style-set: "std-select-multiple-checkmarks"; } @set std-select-multiple-checkmarks < std-select { option { padding: 1px 1px 1px system-small-icon-width; foreground-repeat:no-repeat; foreground-position:1px 50%; foreground-image:url(theme:check-normal); background-color:transparent; color:windowtext; } option:checked { foreground-image:url(theme:check-checked-normal); background-color:transparent; color:windowtext; } option:rtl { padding: 1px system-small-icon-width 1px 1px; foreground-position-right:1px; foreground-position-left:auto; } } /* dropdown combobox */ widget[type="select-dropdown"], select[type="select-dropdown"] { style-set: "std-select-dropdown"; } @set std-select-dropdown { :root { font:system; behavior:dropdown-select; padding:0; flow:horizontal; /* caption, button*/ background-repeat:stretch; background-image:url(theme:edit-normal); width: max-intrinsic; height: max-intrinsic; } :root:disabled { background-image:url(theme:edit-disabled); color:graytext; } /* caption portion of combobox */ :root > caption { padding:1px; margin:2px 1px 2px 2px; /* overflow:none; min-width:max-intrinsic; */ overflow-x:hidden; width:100%%; /* everything left from button */ height:100%%; /* takes full height */ min-height:1em; min-width: system-scrollbar-width; vertical-align:middle; white-space: nowrap; /*background-color:window;*/ color:windowtext; } /* caption portion of combobox when select is in focus */ :root:focus > caption { background-color:highlight; color:highlighttext; } /* popup select element */ :root > popup { overflow-x:hidden; overflow-y:auto; padding:2px; display:none; /* invisible normally */ border:none; behavior:select; min-width: max-intrinsic; width: *; height: max-intrinsic; } :root > popup option:current { background-color:highlight; color:highlighttext; } /* dropdown button of the combobox */ :root > button { width :system-scrollbar-width; height :*; margin :system-border-width; /*1px 1px 1px 0px;*/ padding :0; background-repeat :stretch; background-image :url(theme:combobox-button-normal); transition :none; behavior :button; white-space :nowrap; } :root > button:hover { background-image:url(theme:combobox-button-hover); } :root > button:active { background-image:url(theme:combobox-button-pressed); } :root:disabled > button { background-image:url(theme:combobox-button-disabled); color:graytext; } :root[editable] > caption { behavior:edit; cursor:text; context-menu:url(res:behavior-edit-menu.htm); } } textarea/*, htmlarea, richtext */ { min-width: min-intrinsic; min-height: min-intrinsic; width: min-intrinsic; height: min-intrinsic; } plaintext { height: min-intrinsic; } textarea, widget[type="textarea"], plaintext { padding:3px; background-image:url(theme:edit-normal); background-repeat:stretch; overflow-x:auto; overflow-y:scroll; cursor:text; white-space:prewrap; font: system; behavior:plaintext; context-menu:url(res:behavior-text-menu.htm); style-set: "std-textarea"; } textarea[wrap="off"], plaintext[wrap="off"] { overflow-x:scroll; overflow-y:scroll; white-space:pre; } richtext, widget[type="richtext"] { padding:3px; background-image:url(theme:edit-normal); background-repeat:stretch; overflow-x:auto; overflow-y:scroll; //cursor:text; behavior:richtext; context-menu:url(res:behavior-richtext-menu.htm); } textarea:disabled, richtext:disabled, widget[type="textarea"]:disabled, widget[type="richtext"]:disabled, plaintext:disabled { background-image:url(theme:edit-disabled); overflow:hidden; cursor:default; } /*@set std-htmlarea { p:empty { height: 1.2em; border:1px solid blue; } text:empty { height: 1.2em; } } @set std-textarea { root:disabled { background-image:url(theme:edit-disabled); overflow:hidden; cursor:default; } }*/ popup { border:1px solid threedshadow; background-color: infobackground; overflow:none; text-overflow:none; font:system; color:infotext; padding:1px 2px; display:none; /* invisible normally */ width: max-intrinsic; height: max-intrinsic; } widget[type="hslider"], input[type="hslider"] { style-set:"std-hslider"; } @set std-hslider { :root { behavior:slider; cursor:default; padding:2px; height:min-intrinsic; width:100px; background-image:url(theme:h-trackbar-back); background-repeat:stretch; } .slider { foreground-image:url(theme:h-trackbar-thumb-normal); foreground-repeat:stretch; } :root > .slider:hover { foreground-image:url(theme:h-trackbar-thumb-hover); } :root > .slider:active { foreground-image:url(theme:h-trackbar-thumb-pressed); } :root:disabled > .slider { foreground-image:url(theme:h-trackbar-thumb-disabled); } :root:focus > .slider { foreground-image:url(theme:h-trackbar-thumb-focus); } :root:tab-focus { outline:1px dotted invert -1px; } @media handheld { :root:tab-focus { outline:1px solid -2px highlight; } } } widget[type="vslider"], input[type="vslider"] { style-set: "std-vslider"; } @set std-vslider { :root { behavior:slider; cursor:default; padding:2px; height:100px; width:min-intrinsic; background-image:url(theme:v-trackbar-back); background-repeat:stretch; } :root:tab-focus { outline:1px dotted invert -1px; } :root > .slider { foreground-image:url(theme:v-trackbar-thumb-normal); foreground-repeat:stretch; } :root > .slider:hover { foreground-image:url(theme:v-trackbar-thumb-hover); } :root > .slider:active { foreground-image:url(theme:v-trackbar-thumb-pressed); } :root:disabled > .slider { foreground-image:url(theme:v-trackbar-thumb-disabled); } :root:focus > .slider { foreground-image:url(theme:v-trackbar-thumb-focus); } @media handheld { :root:tab-focus { outline:1px solid -2px highlight; } } } widget[type="vscrollbar"], input[type="vscrollbar"] { behavior: scroll-bar; width:min-intrinsic; height:100%%; } widget[type="hscrollbar"], input[type="hscrollbar"] { behavior: scroll-bar; width:100%%; height:min-intrinsic; } frame { behavior: frame; width:*; height:*; } frameset { behavior: frame-set; width:*; height:*; border-spacing:3px; background-color:threedface; } frameset[cols] { flow:horizontal; } frameset[cols] > div { height:*; } frameset[rows] > div { width:*; } menu:synthetic /* builtin popup menu */ { style-set: "std-popup-menu"; } @set std-popup-menu { :root, menu { behavior:menu; /*is a menu*/ flow: vertical; display:none; margin:0; padding:1px; width:max-intrinsic; border:1px solid threedshadow; background-color: window; color:windowtext; margin:0 1px; /* to offset it from parent li */ font: system-menu; } /* menu item in popup menus */ li { width:*; padding-left:24px; /* room for icon */ padding-right:12px; /* room for the arrow */ padding-top:4px; padding-bottom:4px; foreground-repeat: no-repeat; foreground-position: 2px 50%; color:windowtext; } li:has-children { background-image:url(stock:arrow-right); /* that arrow */ background-repeat: no-repeat; background-position: 100% 50%; } li:disabled { color:threedshadow; font-weight: normal; foreground-image-transformation: contrast-brightness-gamma( 0.15,0.75,1.0); } /* accesskey label (span) */ li span.accesskey { display:inline-block; margin-left:*; /* spring to attach it to the right */ padding-left:1em; color:threeddarkshadow; } li:current span.accesskey { color:brown; } /* current menu item */ li:current { background-color:highlight; color:highlighttext; } /* menu separator */ hr { margin:2px; } caption { margin:2px; color:graytext; } img.hr { display:inline-block; vertical-align:bottom; width:*; height:0; margin-bottom:0.4em; border-top:1px solid threedshadow; border-bottom:1px solid threedlight; } } widget[type="calendar"], input[type="calendar"] { style-set: "std-calendar"; } @set std-calendar /* style block for the content of the calendar */ { :root { behavior:calendar; width:max-intrinsic; height:min-intrinsic; font:system; color:windowtext; padding:3px; border:1px solid threedshadow; white-space: nowrap; cursor:default; } :root:tab-focus /* :root here is the element with the style-set set */ { outline:1px dotted invert -4px; /* inside */ } table { width:*; height:*; border-spacing:0; padding:2px; } td.prev-month { background-image:url(theme:h-scrollbar-minus-normal); background-repeat:stretch; } td.prev-month:active { background-image:url(theme:h-scrollbar-minus-pressed); background-repeat:stretch; } td.next-month { background-image:url(theme:h-scrollbar-plus-normal); background-repeat:stretch; } td.next-month:active { background-image:url(theme:h-scrollbar-plus-pressed); background-repeat:stretch; } td.day { text-align:center; padding:2px; width:1.6em; } td.weekday { font-family:tahoma; font-size:6.5pt; color:highlight; text-align:center; padding-top:4px; border-bottom:1px solid threedshadow; } @media handheld { td.weekday { font-size:8pt; } } td.day.off { color: brown; } td.day.other-month { color: graytext; } td.day:current { background-color:threedface; } :root:current td.day:current, :root:focus td.day:current { background-color:highlight; color:highlighttext; } td.day.today { outline:1px solid red -1px; } th span.month, th span.year { display:inline-box; padding:1px 2px; } th span.month:hover, /* these two are sensitive to the mouse wheel */ th span.year:hover { background-color:infobackground; } } widget[type="date"], input[type="date"] { font:system; style-set: "std-date"; } @set std-date < std-edit /* style block for the date ctl, derived from std-edit */ { :root { behavior:date; cursor:default; padding:0; flow:horizontal; } :root > popup { background-color: window; padding:0; border: none; //transition:none; } :root > caption { height:*; margin:3px; behavior: masked-edit; cursor:text; } :root > button { behavior: none; height:*; width: system-scrollbar-width; margin: system-border-width; /*1px 1px 1px 0px;*/ padding:0; background-repeat:stretch; background-image:url(theme:combobox-button-normal); transition:none; } :root > button:hover { background-image:url(theme:combobox-button-hover); } :root > button:active { background-image:url(theme:combobox-button-pressed); } :root > button:disabled { background-image:url(theme:combobox-button-disabled); } } input[type="masked"] { style-set: "std-masked-edit"; } @set std-masked-edit < std-edit /* style block for the masked ctl, derived from std-edit */ { :root { behavior:masked-edit; text-align:center; } } /*legend { color: highlight; }*/