私は、Html + JS + CSSを使用して、実践的で、さらにはベストプラクティスを実践したいと考えています。私は1ページのクライアント専用の数独ページを使用しています。私の数独マークアップは基本的に<table>、で<td>です。
（私はこれを改善するための提案を受け入れています）。
私の要件：
- セルに焦点を合わせます（キーボードの焦点の概念）（黄色の背景にcssで強調表示されます）
- 矢印キー（およびホームなど）を使用してセルをナビゲートします。
- 整数値を入力すると、その値が現在フォーカスされているセルに設定されます
各セル内で入力ボタンを使用します。Javascriptは正常に動作します。
私の唯一の問題はディスプレイにあります。 セルにフォーカスがある場合、強調表示された表示はTD全体をカバーするのではなく、入力ボタンに含まれる視覚空間のみをカバーします。ボタンの周りに「黄色」ではないスペースがあります。
入力の親を選択するために、CSSの選択を上に上げることはできないと思いますか？そのような ：
input:focus '?? how to go up ??' td { background-color:yellow;
各ボタンの表示に常に5文字を表示する（空の場合は5スペース、設定時に中央の文字を変更する）など、いくつかのトリックを試しましたが、視覚的に満足できるものはありません。さらに悪いことに、視覚化のためにコンテンツを変更することは、明らかにベストプラクティスに反します。これが、Html / Css/JsのMVCの違いです。
私はすでにこのサイトで答えを検索しましたが、近いが明確な質問と答えを見つけました。
誰かが私のページを改善するのを手伝ってくれることを願っています...そして私のマークアップスキル:-)