Topic: Styling Rails Forms with CSS

Hello-  I have a rails form I setup and want to style with CSS, but I am having some trouble. I have my form wrapped in a DIV with an id:searchform and a class:search.  Here is the code:

<div id="searchform" class="search"> 
  <!--[form:search]-->
<% form_tag :action => 'search' do %>

<label for="job_search">Search</label>
<%= text_field_tag :query %>
<%= submit_tag "Create" %>

<% end %>
<!--[eoform:search]-->
</div>


I want to style the text area and the submit button. I've tried this code below, along with lots of other combinations, but have had no results.  Anyone else have any luck with this? 
.search textarea {
    width:300px;
}
.search submit {
    width:75px;
}

Thanks

Re: Styling Rails Forms with CSS

For starters you have a text field in that view, not a text area.
THe next problem is that you cant style "submit"..this does not exist as HTML tag. You can overcome both problems by trying this

#searchform input {
  width:300px;
}

Re: Styling Rails Forms with CSS

Thanks for the reply.  I tried that, but it makes my submit button 300px wide as well, so it's not really what I am looking for.

I am new to rails, but I thought that the rails form code renders as html on the page?  I know you can style a form button if you give it a class, but I don't know how to do that with the rails code.  Does anyone know how to do this.  Thanks.

Re: Styling Rails Forms with CSS

You can do this, but it would get ugly very quickly.

<div id="searchform" class="search">
  <!--[form:search]-->
  <% form_tag :action => 'search' do %>
 
  <label for="job_search">Search</label>
  <%= text_field_tag :query, nil, :class => "search_query" %>
  <%= submit_tag "Create", :class => "search_submit" %>
 
  <% end %>
  <!--[eoform:search]-->
</div>

Most of the helps take an options hash which will generate HTML options (like class). But again, it would probably be better to avoid that, if you can. You could override only the submit button, for instance. Also, if you look in the code, you'll find that the helpers often generate IDs as well (which you can use in CSS).

Re: Styling Rails Forms with CSS

<%= submit_tag 'Create', :class => 'search_form' %>

Then you can override the other CSS rule like this:

input.search_form {
  width:100px
}

Personally, I prefer to wrap my inputs in p tags as it's more flexible to do crazy things with floats and whatnot.

<p class="submit"><%= submit_tag, 'Create' %></p>

#CSS
.submit input {
  width:100px;
}


Of course if it really was my code it would be done in HAML

%p.submit= submit_tag, 'Create'

wink

Re: Styling Rails Forms with CSS

Using your original markup...

.search input[type=submit] { width:100px; }

Not sure if this is supported in IE7 or not (every other browser supports it). I still need to upgrade.

Edit: Ok, so I upgraded to IE7 (been needing to do it anyway) and it still doesn't support it, so you might not want to do that, because IE sucks.

Re: Styling Rails Forms with CSS

Haha I agree IE does suck!  That fixed the problem for me.  Thanks for all the input.

Re: Styling Rails Forms with CSS

I've used Uni-Form in the past for CSS Forms: http://dnevnikeklektika.com/uni-form/

At the very least, it's a great reference for complex form layouts.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Styling Rails Forms with CSS

not to mention you have the choice of image_submit_tag and go crazy with it