Styling form controls

I want to be able to style form controls.

I want to be able to style form controls.

For example
<button style="display: block; border:1px solid
red;padding:0;margin:0"><div>content</div></button>

Safari is the only browser that renders the above example correctly: A
button with form element behavior, styled as specified.

Browsers should all do this, but none (except safari) do. Moz, Opera,
and IE do some sort of compromise (Moz & Op just blindly mimic IE to
some degree).

Perhaps display: auto would describe what most UA's do now; they just
use their own native-type of gui.

I want to use my gui and have the button funtion as a button. If I
want to submit or reset the form, I'll use the appropriate type
attribute.

What do page authors do now? Well, most will use something as
inaccessible as this w/o even blinking:
<div style="..."><a href="javascript:submitForm()"></div>

Javascript should not be relied upon for page submissions and its up
to the browser vendors to give page authors more flexibility.




Let the appearance be determined by the CSS and the behavior of the
input element determined by the type of input. I used the :checked
pseudo-class (1)

<input type=:"checkbox" style="display: block" /> does not work.

checkbox {
   background: #fff url(/img/checkbox.gif) no-repeat;
}

checkbox:checked  {
   background: #fff url(/img/checkbox_checked.gif) no-repeat;
}

1) http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20011105/xhtml/static/html_object/css3-modsel-25.html
-- 
http://dhtmlkitchen.com/

Received on Saturday, 13 August 2005 13:27:49 UTC