manabuQiita
@manabuQiita (mnb)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

htmlのaudioの再生ボタンクリック時の枠線について

サイトにhtmlのaudioタグを使ってmp3ファイルを埋め込んでいるのですが
再生ボタンクリック時に枠線がちらっと表示されてしまいます。これを表示させないようにする方法はないのでしょうか。
audioタグ自体にborder:noneを設定するのと
疑似要素:active時もborder:noneを設定してみましたがいずれもうまくいきませんでした。

0

1Answer

枠線を消したい、というのはycv57u6yさんが仰るように:focusoutline: none;を当てると叶いますが、そもそも論としてアクセシビリティの観点からは消すべきではない要素です

もしどうしても見た目の問題で消したいとあらば、マウス入力かキーボード入力かを判別してoutlineの挙動を変えてくれるライブラリもありますのでそういったものを使用する方が良いかなと思います
https://github.com/ten1seven/what-input

若干ずれた回答になってしまってすみません :bow:

0Like

Your answer might help someone💌