Изменение внешнего вида текстовых полей

Question

Как мне изменить мои текстовые поля, чтобы они больше походили на текстовые поля для входа в Twitter или даже на текстовое поле Заголовок для Stackoverflow при публикации нового вопроса.

Я сейчас просто использую:

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

Answer 1

Firebug для проверки CSS

Вы пытались использовать инструмент Firebug для FireFox?

Вы можете просматривать элементы на веб-сайтах и ​​видеть, какие стили были использованы.

В случае ввода заголовка StackOverflow использовался следующий стиль:

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

Answer 2

Общий принцип достижения желаемого - указывать тонкую границу для текстовых полей в вашем CSS. Чтобы соответствовать текстовому полю заголовка переполнения стека, добавьте его в свой файл CSS:

input {
  border: 1px solid #999;
}

Answer 3

Я думаю, вам нужно добавить:

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

... и затем определите класс css с именем 'cssclassname' (или как вы хотите, чтобы он был) для стиля CSS.

Хорошее руководство для текстовых полей:

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

Answer 4

Посмотрите здесь.

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