Re: Styling form control elements

On 12/6/13 10:25 PM, Domenic Denicola wrote:
> We can create our own arrows with (multiple) background images, or ::after.

You can, but if it doesn't match the scrollbar width in cases when there 
is a scrollbar the result looks pretty terrible when the popup is 
opened...  And scrollbar widths are user-configurable.

There's some pretty painstaking code in Gecko to make the arrow bit be 
the width of the scrollbar, last I checked.

On the other hand, I think speccing <option> should actually be pretty 
simple if desired.  Gecko has no real magic for these in terms of 
rendering; they're just CSS blocks that happen to contain text, and you 
can style them however you please, modulo these UA styles:

option {
    float: none !important;
    position: static !important;
    line-height: normal !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
}

option:checked {
   background-color: -moz-html-cellhighlight !important;
   color: -moz-html-cellhighlighttext !important;
}

and similar for checked options in focused selects but with a different 
color/background.

And even for the :checked case I'd love it if we could allow pages to 
style them somehow without just nuking the selection indicator all the 
time, which is what they do now if we allow changing the color and 
background there.

Now whether you can convince other UAs to use CSS for their options, 
that's a good question.

-Boris

Received on Saturday, 7 December 2013 03:41:44 UTC