Re: [css-d] Styling form controls

On 8/15/05, Christian Heilmann <codepo8@gmail.com> wrote:
> > 1. --> CSS in form elements is a crapshoot. The issue that has been
> > debated by many Mozilla developers and w3c memebers (I hickson, B
> > Zbarsky, D Baron).
> 
> Yes, what do you want us to do about it?
> 
> > 0. I want to control the style of form elements. As-is, it is a
> > crapshoot in the browsers. you can apply some properties to some
> > elements in some browsers. But then when you try to float something or
> > position something, it might break in one browser.
> 
> Which is a sign that it just cannot be handled safely yet, and with
> good reason, as form controls are not only content but also
> interaction elements.I wouldn't want to code a browser, especially not
> the form control section. Just checking the possible use cases for a
> scrollbar is mindboggling.
> 
> > Using CSS for form elements is unreliable and unpredictable -- kind of
> > like using CSS in the days of IE4 and NS4. But that didn't stop people
> > from trying and writing about it. And eventually, progress has been
> > made.
> 
> It also lead to codeforking and bloated and unmaintainable code. I
> remember adding nested FONT settings and bgcolor and CSS to make a
> radio button have the same background colour as the parent element on
> 3 different browsers. Then we had browser sniffing JavaScripts sending
> different bespoke style sheets to each browser in every version. Now
> we have CSS hacks. How many more times do we have to go around in the
> same circle?
> 
> It is not about the technical feasibility, it is a question of
> _should_ forms be styleable or should they simply be part of the user
> agent OS. It is bad enough that you can make text totally unreadable,
> should a web developer also get the chance to make form unusable?
> 

Form elements are styleable, but the results are a crapshoot. 

Forms elements are often the culprit of many issues. If I say display:
block, I want a block. A block does not look like a checkbox. If the
element is actually a checkbox element, then it will receive focus and
can have it's checked state toggled.

Here's an example of the kinds of things we have to do to work around this. 
http://www.mozilla.org/access/samples/dhtml-checkbox.html

Javascript is used to make a span have the behavior of a checkbox.
Instead, a checkbox element could have been used. When the checkbox
appearance is not acceptable, then the only possible solution is to
make a workaround with span and javascript. If display were
implemented properly (for checkbox elements), then all you would need
is:
 input[type=checkbox] {
  display: block; 
  height: 12px;
  width: 12px;
  background: url(cb_unchecked.png);
}

 input[type=checkbox]:checked{
  background: url(cb_checked.png);
}

Another example is button elements. Every browser except safari screws
them up. There is extra faux padding that cannot be removed (except
safari), positioning is f'd up, and floats don't work. Go to
kodakgallery.com and you can see the buttons are just div with <a>
inside using js to submit the form. That was the only way we could
make buttons i18n'able and have rounded corners. Javascript should not
be required to make a button.

Garrett
-- 
http://dhtmlkitchen.com/

Received on Monday, 15 August 2005 17:52:48 UTC