Question

我对简单表单gem还是很陌生，我想使用SVG插件自定义输入，例如在输入字段“ Email”中添加电子邮件图片

这是svg代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" width="24" height="24"><title>email 84</title><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="#111111" stroke="#111111"><polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="1,3 12,13 23,3 " stroke-linecap="butt"/> <rect x="1" y="3" fill="none" stroke="#111111" stroke-miterlimit="10" width="22" height="18"/></g></svg>

这是我的简单表单代码：

<div class="col-xs-12 col-sm-4 col-sm-offset-4">
  <div class="form-login">
    <p>Welcome !!</p>
     <div class="hr">
    </div>

    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= f.error_notification %>

      <div class="form-inputs">
        <%= f.input :first_name, required: true, autofocus: true, placeholder: "First name" %>
         <%= f.input :last_name, required: true, autofocus: true, placeholder: "Last name" %>
        <%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
        <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), placeholder: "Password" %>
        <%= f.input :password_confirmation, required: true, placeholder: "Password" %>
      </div>

      <div class="form-actions">
        <%= f.button :submit, "Sign up", class: "btn btn-danger small-btn width-login" %>
      </div>
    <% end %>

</div>
</div>

我应该在哪里放置SVG代码？

谢谢！

Answer 1

您可以在输入标签之前放置标签标签中

<%= f.label(:email) do %>
  # Here is the SVG
  #Edit
  <%= f.input :email, required: true, autofocus: true, placeholder: "Email Address" %>
<% end %>

编辑： 而且您应该使用How to add a SVG icon within an input?

中的css

将svg插入简单表单输入

1 个答案: