更改文本字段的外观

Question

当您发布新问题时，如何更改我的文本字段，使其看起来更像Twitter登录文本字段，甚至是Stackoverflow的标题文本字段。

我目前只是使用：

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

Answer 1

看看这里。

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

Answer 2

实现所需内容的一般原则是在CSS中的文本字段中指定细边框。要匹配Stack Overflow Title文本字段，请将其添加到CSS文件中：

input {
  border: 1px solid #999;
}

Answer 3

我认为您需要添加：

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

...然后定义一个名为'cssclassname'的css类（或任何你想要它的样式）来设置css的样式。

一个很好的文本框css指南：

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

Answer 4

用于CSS检查的Firebug

您是否尝试过使用FireFox的Firebug工具？

您可以检查网站上的元素并查看已使用的样式。

对于StackOverflow标题输入，使用了以下样式：

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