ラジオボタンやチェックボックスをコーディングする際のフォーカスについて

Question

ラジオボタンやチェックボックスをコーディングする際、
みなさんはどうやって作っていますか？

今まではinputをdisplay:none;して、labelでデザインを作って…というやり方だったのですが、Tab操作ができずユーザビリティ的によくないという話になり。

もっともだと思ったので、現在
・Tab操作ができる
・ラジオボタンorチェックボックスにfocusされた際にfocusされたことがわかる（よくある周りに点線が出るタイプのデザイン）
を作る方法を探しているのですが、同じタイプのラジオボタン/チェックボックスを作られてる方いらっしゃいますか？

CSSだけでは厳しいと思うのでJS,jQueryあたりのやり方を探してはみたのですが見つからず。
プラグインは見つけましたが、自由にデザインを変えられるわけではないので、できれば自作したいな〜と。

お知恵をお借りできれば幸いです。

//追記
すみません、自己解決しました。
https://qiita.com/Garyuten/items/b87b7d91279c0bded576
上記のような方法を探しておりました…！

具体例がなくわかりづらい質問失礼いたしました。。

Comments

[m.ts10806]

要件次第ではないでしょうか。
より具体的に「やりたいこと」を記載した上で、調べたこと試したことを記載された方がアドバイスが望めると思います。

Answer 1

下記で紹介されている方法はいかがですか。

アクセシビリティで気をつけるchecbox,radioのCSS - Qiita

Comments

[mamemam]

は！まさに同じ記事を誤差で見つけておりました！
ありがとうございます！この方法で試してみます。