by Matt Coughlin

Simple Form Styling:

Goal:

Example:



Implementation notes:

HTML:

<input type="text" class="simple-form" id="user-name" name="user-name" />
...
<select class="simple-form" id="year" name="year" size="1">
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
</select>
...
<input type="checkbox" class="simple-form" id="agree" name="agree"
       value="agree" checked="checked" />
...
<input type="button" class="simple-form" id="submit" name="submit"
       value="Submit" onclick="alert('Button pressed');"/>
...
<textarea class="simple-form resize" name="comments" id="comments"
          cols="30" rows="4"></textarea>
...
<input type="file" class="simple-form" id="file-input" name="file-input"/>
...
<input type="radio" class="simple-form" id="food1" name="food" value="1" checked="checked"/>
<input type="radio" class="simple-form" id="food2" name="food" value="2"/>
<input type="radio" class="simple-form" id="food3" name="food" value="3"/>
        

CSS:

css/simple-style.css

JavaScript:

js/simple-style.js

$(document).ready(function() {
    simpleForm.style();
});