添付画像のように背景をグレーで角を丸くし、入力フォームをその中に入れたいと思っています。
bootstrapを使っており下記のように書いたのですが、角丸やsubmitボタンのサイズ等全く反映されません。
対応方法を教えていただければと思います。
よろしくお願い致します。
html
1<div class="top_image"> 2<div class="container"> 3 <div class="col-lg-12 mx-auto"> 4 <form> 5 <%= form_for @user, url:sign_in_path do |f| %> 6 <div class="form-group"> 7 <label for="user_email"></label> 8 <%= f.email_field :email, class: "form-control", placeholder:"メールアドレス" %> 9 <label for="user_password"></label> 10 <%= f.password_field :password, class: "form-control", placeholder:"パスワード" %> 11 <input type="submit" value="ログインする" class="btn btn-primary btn-block"> 12 </div> 13 <% end %> 14 </form> 15 </div> 16</div> 17</div>
css
1.form-group { 2 width: 500px; 3 border: 1px solid #d8dadf; 4 padding: 10px; 5 color: #000000; 6 background-color: #fff; 7 border-radius: 2px; 8 margin-left: auto; 9} 10 11label[for="user_email"] { 12 width: 80%; 13 font-size: 16px; 14 letter-spacing: 2px; 15} 16 17label[for="user_password"] { 18 width: 80%; 19 font-size: 16px; 20 letter-spacing: 2px; 21} 22 23input[type="submit"]{ 24 width: 200px; 25} 26
回答1件
あなたの回答
tips
プレビュー