Page 1 of 1

Styling forms you didn't write

Posted: Tue Mar 14, 2006 3:50 pm
by calguy1000
often times you didn't write a form (especially if it's provided by one of cms's modules), after some research, I found a technique that can help you style them:

basically:  wrap the entire form in a , then use cascading stylesheets to handle the basic types of elements, you can also use fieldset and label attributes to do it.

Here's an overly simplified example.

Code: Select all

<__html>
<head><title>test</title>
<style type="text/css">
div.test input {border:solid 1px #cccccc; background-color: lime; color: red; }
div.test input[type="text"] {border:none; background-color: yellow; color: red; }
</style>
</head>
</__body>
<form action="#">
<input type="button" value="default">
<input type="text" value="stuff" size="20">
</form>
<div class="test">
<form action="#">
<input type="button" value="custom">
<input type="text" value="stuff" size="20">
</form>
</div>
<__body>
</__html>

Re: Styling forms you didn't write

Posted: Tue Aug 22, 2006 7:57 am
by horus
Nice, but attibute selector doesn't work on IE so this way is only a partial solution. For future maybe will be possible to replace input type="[button|submit|reset]" with button element (better way in my opinion) or add a default css class for buttons in cms core and modules to help users to customise layout.

Anyone knows if there are other possible solutions for present days?

Re: Styling forms you didn't write

Posted: Tue Aug 22, 2006 9:24 am
by tsw
IE support for even basic css techniques is very poor.

assigning class="button" to all buttons and so on would be a working solution. Its easy enough to change in the api, but then all module developers would have to check their forms... (which might not be such a bad thing afterall ;)

Also someone pointed out SmartyValidator yesterday which looks like a clean solution for showing submit errors (still have to dig into it better)