Railsでf.text_fieldに背景を表示させ、枠を消す

Question

いつもお世話になります。

下記のようにloginフォームを作っており、フォーム内のtd要素であるf.text_field :nameとf.password_field :passwordの背景を画像(xxxx.png)に変更しようとしたのですが、背景は表示されているものの、text_fieldの枠線が消えていない状況です。 outline: noneで消えるという記事も見かけたのですがうまく行きませんでした。

また画像と枠ともサイズが合っていないので、この枠を消しテキストエリアがぴったりとなるように調整したいのですが、どのように対処するのが良いのでしょうか。

ご教示のほどよろしくお願いいたします。

　<div class="login_form">
    <%= form_with(model: @userinfo, local: true, html: {id: 'inform_save', class: 'form', autocomplete: 'off'}) do |f| %>
      <table>
        <tr>
          <th><%= f.label :name, 'アカウント名' %></th>
          <td><%= f.text_field :name %></td>
        </tr>
        <tr>
          <th><%= f.label :password, 'パスワード' %></th>
          <td><%= f.password_field :password %></td>
        </tr>
      </table>

      <%= f.submit 'ログインする' %>

    <% end %>
  </div>

# CSS

.login_form table td {
    background: url(/xxx/xx/xxxx.png) no-repeat;
　　width: 300px;
    height: 50px;
    outline: none;
  }

Answer 1

text_field メソッドは style オプションを渡すことができ，これでスタイルを制御することができます。

例えば，

f.text_field :name, style: "border: none"

で枠線が消せます。

あるいは，もちろん

f.text_field :name, class: "クラス名"

で適当なクラス名を与えて，スタイルシートでそのクラスの border を none にすることでも実現できます。

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。style: "border: none"で枠を消すことはできました。度々の質問で恐縮なのですが、text_fieldをクリックしフォーカスした際に枠が再び表示されてしまうのですが、これを回避する方法はあるのでしょうか。

不勉強で申し訳ございません。ご教示いただけると幸いです。
よろしくお願いいたします。

[scivola]

手元で試したところ，Firefox（最新）では消えたままでしたが，Safari（11.0.2，macOS）では確かにフォーカスすると枠が見えますね。
何か手立てがあるかどうか，私にはわかりません。

[lyzmfeqpxs54]

ご回答ありがとうございます。ブラウザ依存に関しては何か対策を考えたいと思います。度々のご回答ありがとうございました。