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

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.

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

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

After the installation, you’re good to go.

Here’s how it works.

<%= f.text_field :name -%>

Gives us:

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

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

Gives us:

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

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 :-)

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