Rails簡單形式不同形式的不同樣式

我在一個rails 3.1項目中使用簡單形式的gem和twitter bootstrap。我有幾個表單視圖都很好看。但現在我喜歡將文本輸入字段設置爲其中一種形式，因此它會變得更小。文本輸入字段位於我的控制器之一稱爲「角色」的編輯窗體視圖中。該部分的形式如下：Rails簡單形式不同形式的不同樣式

= simple_form_for @role, :html => { :class => 'form-horizontal' } do |f| 
    = f.error_notification 
    = f.input :name 
    = f.input :description 
    .form-actions 
    = f.button :submit, :class => 'btn-primary' 
    = link_to t('.cancel', :default => t("helpers.links.cancel")), roles_path, :class => 'btn'

有下式的文件：

app/assets/stylesheets/roles.css.scss

這是與支架命令創建

。我試圖在這裏添加一些樣式，但這會導致我的應用程序的每種形式發生變化。是否有一種很好的方式來改變文本輸入字段的樣式，只用一種簡單的形式爲一個特殊的窗體視圖？我應該在哪裏放置樣式，以及如果我希望輸入文本字段的大小爲：寬度100px到高度50px，樣式將如何？

來源

2012-12-31 ctpfaff

即使您有一個專門用於角色的特殊CSS文件，您也需要知道。最後，每個CSS文件都捆綁在一起並一起服務。這意味着，roles.css將被加載到每個頁面上，這會導致您所描述的行爲。

如果你想方式下的一個形式，你可以通過添加類做到這一點：

= simple_form_for @role, :html => { :class => 'form-horizontal roles-form' } do |f|

現在你可以範圍你的CSS定義來.roles-form，他們將只適用於這個單一形式。

來源

2012-12-31 13:57:17

他聽起來不錯。我按照你的建議添加了課程，並嘗試在之後改變課程的風格。但沒有成功。我將以下樣式包含在角色css文件中。 .roles-form {font-family：Arial，sans-serif; color：#FFFFFF; font-size：12px; border：none; background-color：＃BF0000; height：22px; width：250px; padding：3px; } 這將是一個很大的變化，但沒有發生任何事 – ctpfaff

您可能需要將樣式應用於'input'標記，而不是完整的表單。嘗試使用以下CSS選擇器：'.roles-form input {...}' –

感謝您的幫助。現在它工作正常。 – ctpfaff

Rails簡單形式不同形式的不同樣式

回答

相關問題