如何自定义简单的Form文本区域？

Question

我想在此代码中自定义输入区域

<%= simple_form_for @fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
                                          <%= f.input :regular, label: "Regular" %>
                                          <%= f.input :medium, label: "Medium"%>
                                          <%= f.input :premium, label: "Premium" %>
                                          <%= f.input :diesel, label: "Diesel" %>

具有如下图所示的样式

我不想要横向水平或任何东西。只想在前面找到那个dollor。

甚至更好，如下所示，但使用$代替@

Answer 1

您可以找到解决方案here。他使用Bootstrap和SimpleForm

Answer 2

您必须将 bootstrap css库添加到您的应用程序中并尝试以下代码

simple_form_for @fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
 <div class="form-group">
  <div class="input-group">
   <div class="input-group-addon">$</div>
    <%= f.text_field :regular, placeholder: "Regular", class:"form-control" %>
  </div>
  <div class="input-group">
   <div class="input-group-addon">$</div>
   <%= f.text_field :medium, placeholder: "Medium", class:"form-control"%>

  </div
  <div class="input-group">
   <div class="input-group-addon">$</div>
   <%= f.text_field :premium, placeholder: "Premium",class:"form-control" %>

  </div
  <div class="input-group">
   <div class="input-group-addon">$</div>
   <%= f.text_field :diesel, placeholder: "Diesel",class:"form-control" %>   

  </div
 </div>
<%end%>