CSS: OS metrics units, need some advice

I am trying to build a system of input widgets for HTML based solely
on DOM/CSS primitives in HTMLayout engine.

For rendering OS native shapes for inputs I am using special
URL schema - url(theme:button-normal), for example <INPUT type="button"> 
looks like:

/* text button */
input[type="button"], button
{
 padding:0.5em 1em;
 display:inline-block;
 white-space: nowrap;
 behavior:input-button;
 background-repeat:stretch;
 background-image:url(theme:button-normal);
}
input[type="button"]:hover, button:hover
{
 background-image:url(theme:button-hover);
}
input[type="button"]:hover:active, button:hover:active
{
 background-image:url(theme:button-pressed);
}
input[type="button"]:disabled, button:disabled
{
 background-image:url(theme:button-disabled);
}

Here is <select> in various incarnations:
http://www.terrainformatica.com/htmlayout/images/selects2.jpg

So far so good but the only one question remains:

==> How to define in CSS OS specific metrics?

For example I need to define somehow width of "dropdown button"
in inline dropdown <select>.

Now I am using special function metrics

select[type="select-dropdown"] > button
{
   width:metrics( width, theme:combobox-button);
   height: 100%;
}

More generic question:

==> do we need in CSS os-specific metrics or/and shapes at all?

Speaking about styling input elements - answer is definitely yes. Active 
form elements
need to meet user's expectations in most cases.

Andrew Fedoniouk.
http://terrainformatica.com

Received on Sunday, 16 October 2005 18:56:31 UTC