Changing the look of textfields

Question

How do I change my textfields so they look more like the Twitter login textfields or even the Title textfield for Stackoverflow when you post a new question.

I currently just use:

<%= text_field_tag 'name', @name, :size => 30 %>

Answer 1

Have a look here.

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

Answer 2

The general principle to achieving what you want is to specify a thin border on the text fields in your CSS. To match the Stack Overflow Title text field, add this to your CSS file:

input {
  border: 1px solid #999;
}

Answer 3

I think you need to add:

<%= text_field_tag 'name', @name, :size => 5, :class => "cssclassname"  %>

...and then define a css class called 'cssclassname' (or whatever you want it to be) to style the css.

A nice css guide for text boxes:

http://www.cssportal.com/form-elements/text-box.htm

Answer 4

Firebug for CSS Inspection

Have you tried using the Firebug tool for FireFox?

You can inspect elements on web sites and see what styles have been used.

In the case of the StackOverflow title input, the following style has been used:

input {
    margin:5px 0pt;
    padding:3px;
}
input, select, button {
    border:1px solid #999999;
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:100%;
}