Question

I have a rails template form with this code:

<div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
</div>
...
<div class="actions">
<%= f.submit %>
</div>

Which in turn generates:

<div class="field">
<label for="item_title">Title</label><br />
<input id="item_title" name="item[title]" size="30" type="text" />
</div>
...
<div class="actions">
<input name="commit" type="submit" value="Create Item" />
</div>

I’m currently using this as part of a application.css:

input{
color:#000000;
padding:2px;
background-color:#F8F8F8;
border:1px solid #66CC00;
}

How can I style these to elements separately from the application.css file? I’ve tried .text_field{#styles here} and just .field{#styles here} in the file but with no luck.

I basically want them to look ‘nice’ but not have them so similar.

Answer 1

Use css attribute selector like this:

input[name=item\[title\]] {
    color: red;
}

To select input based on name, for example (if you have no class attribute avilable).

More info on Attribute selectors

But, the thing you want, I guess, is:

.field input[type=text] {
    color: red;
}

or

.actions input[type=text] {
    color: red;
}

That is basics of css.

If you want more info about styling input elements, see other answers.