W3C home > Mailing lists > Public > www-style@w3.org > November 2012

Re: <select> elements are the last of the system widgets to require hacky styling

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 1 Nov 2012 21:32:22 -0700
Message-ID: <CALRQH79Osov4QUKgaE71y6f1k0nrfXSKEFFj-k_sSr9i9QhxPw@mail.gmail.com>
To: Aaron Hamilton <aaron@correspondwith.me>
Cc: www-style@w3.org
On Sun, Oct 28, 2012 at 7:30 PM, Aaron Hamilton <aaron@correspondwith.me> wrote:
> I often-enough see people overflowing and masking select boxes to get rid of that remaining system widget button on them, this is something that bothers me (and restricts my work as well).
> It'd be nice to be finally trusted to style select elements and not leave all my users scratching their heads...
>
> Is this something that's been considered already, and refused for a practical reason?
> Anyway, I'm new around here(please don't eat me), and I hope that this particular hack may be avoided in the future.

Just if it is interesting to someone:

Here are renderings of three types of dropdown selects that I have in
my Sciter2 engine:
https://dl.dropbox.com/u/14981836/dropdown-selects.png
(the last one, <select multiple>, is shown with dropdown list open).

Internal model of such selects looks close to this:

<select>
   <shadow:label />
   <shadow:button />
   <shadow:popup >
       <option>...</option>
       <option>...</option>
   </shadow:popup>
</select>

Styling is relatively trivial and close to this:

select[type=dropdown-select]  {
   flow:horizontal;
   background: no-repeat cover url(system:dd-select-normal);
}
select[type=dropdown-select] :> button {   ...  }
select[type=dropdown-select] :> label {  ...  }
select[type=dropdown-select] :> popup {  position:popup(parent,2); ... }

select[type=dropdown-select][editable] :> label {  behavior:single-line-edit;  }

Where:
   background: no-repeat cover url(system:dd-select-normal);
means delegation of background drawing to host OS for that particular
UI element. On Windows, for example, that is drawn by uxthemes.dll
directly.

So all this can be restyled by authors.  Like here:
http://www.antivirusware.com/norton-antivirus/screenshots/large6.jpg or
here http://i1-win.softpedia-static.com/screenshots/Norton-Internet-Security_23.png?1351249752

To be honest I don't understand why it takes so long to get to
something close to this,
that's really simple.

-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Friday, 2 November 2012 04:32:49 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:02 GMT