Re: [css-d] Styling form controls

I can make a "checkbox" look however I want. Using div and span and js
if I have to.

I can do it. it's how I go about that. If I rely javascript, it
accessibility will be affected.

For example, take a bold button in a text editor, such as in gmail.
Here's the req for our widget:

This is a 2-state pushbutton.

The button is either depressed or not depressed, depending on the
state of the selected text.

Since checkboxes are really just two-state elements, we can use a
checkbox element, but style it like a button, using a background-image
for the letter B.

<input type="checkbox" name="font-weight" />


We also have a req to make alignment buttons. This is a set of four
buttons, left, center, right, justify.

L  |   C  |   R   |   J

Only one button can be depressed at a time. Since we have a select-one
type of functionality, we can use radio buttons and style them like
square buttons. The checked state will be a depressed button.

<input type="radio" name="text-align" value="left" />
<input type="radio" name="text-align" value="center" />
<input type="radio" name="text-align" value="right" />
<input type="radio" name="text-align" value="justify" />

It's a lot more semantic than div and span.

It's easier to make the widgets degradable .

It is easier to write, with less javascript and CSS.

The use of CSS styled form elements covers more than DHTML editors,
such as simple button elements of type="button" inputs.

Thanks for the reminder about the button element in IE. You are right,
in IE submitting a button submits the innerText as the value. I forgot
about that one!

<button name="checkout" value="discount"><div>discount-code
checkout</div></button>

Will submit "checkout=discount-code checkout" in IE. 

Interestingly stupid and annoying browser. I was considering browsers
that supported the '97 rec for HTML4. I forgot about that anomaly. My
point stands, regardless of the IE bug.

Garrett


On 8/15/05, David Woolley <david@djwhome.demon.co.uk> wrote:
> 
> > 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
> 
> If you create a check box that doesn't look like a check box, you have
> created a usability and accessibilty problem, which is why I don't like
> this idea at all.
> 
> The only reason I can see for permitting heavy styling of form controls
> is that the alternative is worse, i.e. the use of scripting that makes
> pages totally dependent on a visual interface and enabled scripting.
> 
> 


-- 
http://dhtmlkitchen.com/

Received on Monday, 15 August 2005 23:17:45 UTC