Modification de l'apparence des champs de texte

Question

Comment modifier mes champs de texte afin qu'ils ressemblent davantage aux champs de texte de connexion Twitter ou même au champ Titre de Stackoverflow lorsque vous postez une nouvelle question.

Je actuellement simplement utiliser:

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

Answer 1

Jetez un coup d'oeil ici.

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

Answer 2

Le principe général à la réalisation de ce que vous voulez est de spécifier une bordure mince sur les champs de texte dans votre CSS. Pour correspondre au champ texte Stack Titre Overflow, ajoutez à votre fichier CSS:

input { 
    border: 1px solid #999; 
} 

Answer 3

Je pense que vous devez ajouter:

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

... puis définir une classe css appelée « cssclassname » (ou ce que vous voulez que ce soit) pour styliser le CSS.

Un joli guide de CSS pour les zones de texte:

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

Answer 4

Firebug pour CSS Inspection

Avez-vous essayé d'utiliser l'outil Firebug pour FireFox?

Vous pouvez inspecter des éléments sur des sites Web et voir quels styles ont été utilisés.

Dans le cas de l'entrée du titre StackOverflow, le style suivant a été utilisé:

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