text_fieldにCSSってどうやってあてるんだっけ？

Railsアプリケーション作成時にフロント部分を作成していた時に

example.haml.html

.item__name
  商品名
  .name--input
    = f.text_field :name, placeholder: "40文字まで"

のようなhamlを作成していざscssを記述しようとしたときに
このtext_filedにどうやってCSSをあてるのかが
ふと考えると分からなかったんです。

同じようなnumber_fieldやsubmitなどにも使えるやり方なので
是非覚えておいたほうがよいです。

##そもそもtext_fieldで作られるHTMLは何なのか？
上の= f.text_field :name, placeholder: "40文字まで"で作られるHTMLを
chromeの検証で確認してみると
<input placeholder="40文字まで" type="text" name="item[name]" id=item_name>
というものが作成されているのがわかるかと思います。

text_fieldとかはRailsがviewを簡潔に記述するために用意してくれているヘルパーメソッドのため
簡単な記述で実際はこういうHTML文の作成もしてくれています。
この作成されたHTMLにあてるようにCSSを記述すればOKです。

今回はSCSSを使い記述しました。
##CSSをあててみよう

example.scss

.item__name{
  input[type="text"]{
    width: 100%;
    height: 20px;
    font-size: 14px;
  }
  ::placeholder{
    padding: 5px 5px;
  }
}

と指定して記述すると、text_fieldにCSSをあてることができます。
placholderはCSSの擬似要素のため上記のような記述をする必要があります。

ヘルバーメソッドを使って記述した場合にどのようなHTML文が作成されているのかを確認すると解決できる部分でしたね。

参考先

rails フォームの大きさをcssで変更する

[CSS: カスケーディングスタイルシート::placeholder]
(https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder)