CODEWITHSUNDEEP
htmlruby-on-railscss
alamodey
alamodey

Reputation: 14938

Changing the look of textfields

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 %>

Upvotes: 0

Views: 255

Answers (4)

John Topley
John Topley

Reputation: 115362

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;
}

Upvotes: 1

Jon Winstanley
Jon Winstanley

Reputation: 23311

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%;
}

Upvotes: 1

Neil Trodden
Neil Trodden

Reputation: 4728

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

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190943

Have a look here.

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

Upvotes: 1

Related Questions