O Html marcação para um TD focalizável?

Question

Eu quero practive, e até mesmo as melhores práticas, com HTML + JS + CSS. Eu uso um cliente só página uma página Sudoku. Minha marcação Sudoku é basicamente um <table>, com <td>.
(Estou aberto a sugestões para melhorar este).

Os meus requisitos:

1. Have a célula sob foco (a noção teclado de foco) (highlighed com css a um fundo amarelo)
2. Navegue pelas células com teclas de seta (mais Início etc).
3. type-in ??um valor inteiro define esse valor para a célula atualmente focada

Eu uso um botão de entrada dentro de cada célula. O Javascript funciona bem.

O meu único problema é com o display. exibição Quando uma célula tem o foco, é realçado não cobre toda a TD , em vez apenas o espaço visual incluído no botão de entrada. Eu tenho algum espaço ao redor do botão que não é 'amarelo'.

Eu não acho que eu poderia ir para cima na seleção CSS, para selecionar o pai da entrada, eu poderia? Tais como:

input:focus '?? how to go up ??' td { background-color:yellow;

Eu tentei alguns truques, como ter sempre 5 caracteres em cada visualização do botão (5 espaços quando vazio, mudando o caráter médio quando definido), mas nada é visualmente satisfazendo. Pior ainda, é claramente contra as melhores práticas para alterar o conteúdo por uma questão de visualizar. Isso é o que a distinção entre MVC HTML / CSS / JS é para!

Já procurou neste site para resposta, eu encontrei perto, mas questões distintas e resposta.

Eu estou esperando que alguém poderia ajudar a melhorar a minha página ... e minha habilidade de marcação: -)

Answer 1

Não é possível construir um selector de CSS que corresponde a um nó pai dependente de um (pseudo) de classe nó filho.

Basicamente, você tem duas opções para escolher:

• Tente preencher o td com o input completamente usando regras height e width no seu CSS.

• Set 'centrada' e classe 'desfocados' no seu tds com javascript usando os onfocus e onblur eventos das entradas.

Answer 2

Você não poderia usar um pouco de jQuery para definir uma classe .focused e, em seguida, aplique um pouco de estilo a ele?