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文が作成されているのかを確認すると解決できる部分でしたね。