■分からないこと
form_withでテキストの入力欄を作り、そこにclassの設定をしてcssで装飾したいと思っています。
しかしhamlでのdiv classの書き方が上手く出来ません。
ご教授いただけますと幸いです。
■参考にしたコード
HTML
1<div class="cp_iptxt"> 2 <input type="text" placeholder="お名前"> 3 <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i> 4</div> 5<div class="cp_iptxt"> 6 <input type="text" placeholder="E-Mail"> 7 <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i> 8</div>
■CSS
CSS
1.cp_iptxt { 2 position: relative; 3 width: 27.33%; 4 margin: 40px 3%; 5} 6.cp_iptxt input[type='text'] { 7 font: 15px/24px sans-serif; 8 box-sizing: border-box; 9 width: 100%; 10 padding: 0.3em; 11 padding-left: 40px; 12 letter-spacing: 1px; 13 border: 0; 14} 15.cp_iptxt input[type='text']:focus { 16 outline: none; 17} 18.cp_iptxt input[type='text']:focus::after { 19 outline: none; 20} 21.cp_iptxt i { 22 position: absolute; 23 top: 0; 24 left: 0; 25 padding: 9px 5px; 26 transition: 0.3s; 27 color: #aaaaaa; 28} 29.cp_iptxt::after { 30 display: block; 31 width: 100%; 32 height: 4px; 33 margin-top: -1px; 34 content: ''; 35 border-width: 0 1px 1px 1px; 36 border-style: solid; 37 border-color: #da3c41; 38}
■Rails
view
1= form_with model: @student, local: true do |f| 2 .cp_iptxt 3 = f.label :name, "名前" 4 %small.text-danger※必須 5 = f.text_field :name 6 %i.fa.fa-user.fa-lg.fa-fw{"aria-hidden" => "true"}
■生成されたHTML
HTML
1<div class="cp_iptxt"></div> 2<label for="name">名前</label> 3<small class="text-danger">※必須</small> 4<input type="text" name="name"> 5<i aria-hidden="true" class="fa fa-user fa-lg fa-fw"></i>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。