[英]How do I style the default Formtastic labels?
I'm a new to Formtastic here. 我是Formtastic的新手。 How do I go about styling Formtastic elements?
我该如何设计Formtastic元素? By default, the labels beside my form elements are colored white.
默认情况下,表单元素旁边的标签为白色。 Is this normal or is it because I don't have a formtastic.css in my stylesheets folder?
这是正常现象还是因为我的样式表文件夹中没有formtastic.css?
I was able to figure it out myself. 我自己就能弄清楚。
In my zsh shell in the directory for my Rails app, I ran rails generate formtastic:install
. 在我的Rails应用程序目录的zsh shell中,我运行了
rails generate formtastic:install
。
I also put in the requisite requires in my application.css.scss
file: 我还在我的
application.css.scss
文件中放入了必要的要求:
*= require formtastic
*= require my_formtastic_changes
Following this, I just created a my_formtastic_changes.css.scss
file in my stylesheets directory and implemented the following bit. 之后,我刚刚在样式表目录中创建了
my_formtastic_changes.css.scss
文件,并实现了以下内容。
<%= semantic_form_for @section do |f| %>
<%= f.inputs do %>
<div id="section-details">
<%= f.input :name %>
<%= f.input :category %>
<%= f.input :description %>
<%= f.input :filepath %>
<%= f.input :site_section_id %>
</div>
<% end %>
I just then styled it in the my_formtastic_changes.scss
with this: 然后我在
my_formtastic_changes.scss
使用以下样式:
#section-details label {
color: #000;
}
There is hardly anything special about styling Formtastic
elements. 几乎没有什么特别的造型
Formtastic
元素。 You have to identify them in some CSS
(or preferably SCSS
nowadays) file and style it to your likings. 您必须在一些
CSS
(或现在最好是SCSS
)文件中标识它们,并根据自己的喜好对其进行样式设置。 Your favorite browsers Element info
context menu will be very helpful in figuring out why an element is formatted the way it is. 您最喜欢的浏览器的“
Element info
上下文菜单将非常有助于弄清为什么以这种方式格式化元素。
If you desire a more specifc answer you should post the code of your Formtastic
form together with the resulting HTML
and a description of the label format you desire. 如果您希望得到更具体的答案,则应将
Formtastic
表单的代码以及生成的HTML
和所需标签格式的说明一起发布。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.