Htmlayout- h-smile引擎 学习篇(一)

htmlayout和sciter 使用 h-smile 引擎来翻译 HTML/CSS . h-simle引擎支持 html4.1 和 css2.1, 同时支持少量css3.0.

下文仅展示对CSS扩展属性:

flow 属性  - 浮动

---

1. vertical     [default-value]  属于div的标准布局, 其容纳的各种块, 从顶到底顺序排列成单列.
2. horizontal   水平排列模式
3. h-flow        多行水平排列
4. v-flow        多列垂直排列.

foreground属性 - 前景图

---

1. foreground-attachment
2. foreground-image
3. foreground-position
4. foreground-repeat
5. foreground-image-cursor    当鼠标移动到图片时显示
6. foreground-image-transformation   重点讲解
   其支持2个函数 contrast-brightness-gamma(contrast = 0.5, brightness = 0.5, gamma = 1.0)
               color-schema( color1 [, color2 , color3 , color4 , color5 ] )

支持的CSS选择器

/* CSS 2.1 Selectors */
*
E
E F
E > F
E:first-child
E:last-child
E:link, E:visited
E:active, E:hover, E:focus
E + F
E[foo]
E[foo="warning"]
E[foo~="warning"]
E[foo~="warning"]
E[lang|="en"]
DIV.warning
E#myid

／＊CSS 3.0 Selectors */
E[foo^="val"]
E[foo$="val"]
E[foo*="val"]
E:nth-child(An+B)
E:nth-last-child(An+B)

/*　H-SMILE Specific Selectors　＊／
E:current        选择select元素的当前option
E:checked        选择当前check的input type="checkbox"元素 或者 <option> in <select multiple> element
E:disabled       选择属性失效的元素
E:readonly       选择readonly的元素
E:expanded and E:collapsed  选择 展开/未展开 的 tree-views select元素
E:incomplete     用于未完成的img元素
E:focusable      选择当前获取输入焦点的元素
E:anchor         选择锚点元素
E:synthetic
E:popup          选择表现为弹窗参数的元素
E:owns-popup
E:focus
E:tab-focus
E:busy
E:pressed

 

同时还支持一些  behavior

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;
}*/

转载于:https://my.oschina.net/u/262502/blog/317428