Input CSS

This plugin taps into Rails tag helpers and adds a CSS class equal to the type attribute for all ‘input’ fields.

Reasoning…

One of the biggest pains when designing forms is dealing with the input field. It’s both a button and a text box. And you NEVER want them to look the same (and if you do, your issues are far past what this plugin has to offer).

And of course, this plugin exists mainly because of IE6’s lack of CSS2 support. Blah.

Installation

You can install this as a plugin. Navigate to your project root and type:

git clone git://github.com/rpheath/input_css.git vendor/plugins/input_css

After the installation, you’re good to go.

Example(s)

Here’s how it works.

Example 1: without existing CSS

<%= f.text_field :name -%>

Gives us:

<input type="text" class="text" name="user[name]" value="" />

Example 2: with existing CSS

<%= submit_tag 'Fix Me', :class => 'button' -%>

Gives us:

<input name="commit" type="submit" class="button submit" value="Fix Me" />

The CSS

So now, you can do this in your CSS:

input.text     { ... }
input.submit   { ... }
input.file     { ... }
input.checkbox { ... }
input.radio    { ... }

And things are much easier to style :-)

License

Copyright © 2008 Ryan Heath (http://rpheath.com), released under the MIT license