Re: Dealing with form elements...

Chris Wilson (PSD) wrote:
> Ick ick ick ick!  Let's not hack a one-off solution to this; why don't
> we go with the long-ago proposed arbitrary-attribute mechanism, so you
> could do something like:
> INPUT[TYPE=SUBMIT] { color: green; text-decoration: none; }
> INPUT[TYPE=RESET] { color: red;   text-decoration: none; }
> INPUT[TYPE=IMAGE] { vertical-align: blah; text-decoration: none; }
> INPUT        { text-decoration: underline; }
> obviously, this can go much further:
> UL[TYPE=COMPACT] { ... }
> or even
> A[HREF] { ... } /* any source anchor */
> [HREF] { ... }  /* any element with an HREF */
> I'd sign up to support this.

Looks like a good plan (well, it was my own idea, a long time ago:-) )

However, I'd like to be sure that this is really the best syntax. For a
programmer like Chris Wilson and for myself, this looks pretty natural,
and it doesn't complicate the implementation a whole lot either. But
when all these delimiters come together (# : . [ = ]) can we still claim
that writing style sheets is easy, as the CSS1 Recommendation does now,
in the very first line?

> On a side note, though, there is a problem with describing the
> difference between the "inside" of an INPUT element and the "outside" -
> for example, when you set "vertical-align: super" on a text box, do you
> mean the text box should be superscripted, or the content inside the
> text box should be?  For this, I would propose that a new pseudoclass,
> ":inside" be added and applied to INPUT elements only.  Comments?

Is that really needed? I thought you could use margin for the outside,
padding for the inside and border for the frame. Vertical-align moves
the whole thing up or down, including the border. Example:

        border: outset;
        padding: 0.5em 0.5em 2em 0.5em }

This will create a button with text close to the top:

    ::         #
    ::  Reset  #
    ::         #
    ::         #
    ::         #
    ::         #

(the scale is not right, but you get the idea.)


Follow-Ups: References: