Have Geek Brain

Change the appearance of text boxes

How can I change the text boxes to resemble more Twitter login text boxes or even Stackoverflow Title text box when posting a new question.

Currently I am just using:

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


a source to share


4 answers


Look at here.



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

+1


a source


The general principle of achieving what you want is to specify a thin border for text boxes in CSS. To map a textbox Stack Overflow Title add this to your CSS file:



input {
  border: 1px solid #999;
}
+1


a source


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) for the css style.

Good css tutorial for text boxes:

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

+1


a source


Firebug for CSS validation

Have you tried using Firebug tool for FireFox?

You can check the elements on websites and see what styles were used.

In case of entering a StackOverflow title, the following style is used:

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


a source






More articles:


All Articles