困っていること
表題の通りですがborder-radiusを使用し、丸みをだしてるボタンのフォーカースにborder-radiusが一緒にかかっておらず違和感があります。
通常、border-radiusを使用した場合も一緒にフォーカスも丸くなるので不思議です。
cssを見直してみましたが直りませんでした。
試してみたこと
調べてみてサイトに書いてあることは一通り実践しました。
outline: none;
などを始め同じような質問に書かれていたコードは色々と試してみました。
しかし、個人的にはフォーカスを消すよりも一緒に丸くしたいなと思っています。
該当ソースコード
<title><%= full_title(yield(:title)) %></title> <div class="container-fluid"> <div class="row"> <div class="col-xs-7"> <h2>col-xs-7</h2> </div> <div class="col-xs-5"> <h2>col-xs-5</h2> <div class="form-inline hogehoge"> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="form-group hoge"> <%= f.email_field :email, autofocus: true, :class => "form-control my-form session-form", :placeholder => "メールアドレス" %> </div> <div class="form-group hoge"> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form session-form", :placeholder => "パスワード" %> </div> <div class="form-group hoge"> <div class="actions"> <%= f.submit "ログイン", :class => "btn btn-primary session" %> </div> </div> <% end %> </div> <%= link_to "アカウント登録", new_user_registration_path, class:"btn" %> <br> <%= link_to "サイトについて", home_index_path, class:"btn" %> </div> </div> </div>
フォーム内にグッドラインやinlineを使用しているため、その仕様的なものでこんなことになってしまったのかな?と思っています。
CSSで直るなら嬉しいですが…。
まとめ
フォーカスの線をbtnに合わせて丸くするか、最悪消してしまいたいです。
質問投稿後に追記
css
1.session{ 2 height: 45px; 3 width: 85px; 4 border-radius: 50px; 5 background-color: white; 6 color: #00a1e9; 7 text-align: center; 8 border:solid 1px #00a1e9; 9} 10.session:hover{ 11 background: rgba(240,255,255,0.5); 12 border:solid 1px #00a1e9; 13 color: #00a1e9; 14}
回答1件
あなたの回答
tips
プレビュー