質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

2回答

3501閲覧

CSS:ボタン要素のoutlineを、キーボード操作時にのみ表示する方法

dwayne_johnson

総合スコア86

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1グッド

1クリップ

投稿2018/05/20 00:45

<button>のoutlineがうざい

<button>をクリックしたときに出てくるoutlineがうざいです。

タッチやクリック時の動作の際には単純に消せばよいだけなのですが、例えばキーボードのtabやshiftで操作している時などは、逆にoutlineがないと要素にフォーカスされていることがわかりづらく、どうすればよいのか考えています。

例えば、キーボード操作時にのみoutlineを表示するようにして、普通のクリックの際は表示しないといったことは可能でしょうか?

よろしくお願いします。

kaito2280👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

キーイベントを取得して、キーを押したあとにフォーカスされているのが任意のエレメントなら。outlineを表示するように設定すれば良いかと思います。

投稿2018/05/20 00:59

pinoko

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

キーボード操作時は:focusを書いてみてはいかがでしょうか?

css

1.button:hover, 2.button:active { 3 outline: none; 4} 5.button:focus { 6 outline: solid; 7}

投稿2018/05/20 12:58

tsuka_rinorino

総合スコア229

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dwayne_johnson

2018/05/21 01:45

おーそんな疑似クラスがあるんですね! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問