Em uma página web há um formulário HTML5 com um único campo ...
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Alternativa correta: C - input:focus {background: yellow;}
A questão aborda o conceito de pseudo-classes em CSS, que são utilizadas para definir um estilo especial para um estado específico de um elemento. No caso da questão, o estado em questão é quando o campo de texto do formulário ganha o foco, ou seja, quando o usuário clica no campo para começar a digitar. Isso é representado na folha de estilos CSS pelo :focus.
Para que o campo de texto mude de cor de fundo quando selecionado, é necessário usar a pseudo-classe :focus
aplicada à tag . A pseudo-classe :focus
é ativada automaticamente pelo navegador quando o elemento ganha foco, que pode ocorrer tanto quando o usuário clica no elemento quanto quando utiliza a tecla Tab para navegar entre os campos de um formulário.
A sintaxe correta para mudar o estilo de um elemento quando ele está focado é elemento:pseudo-classe { propriedade: valor; }
. Nesse sentido, a alternativa correta é input:focus {background: yellow;}
porque ela especifica que o campo de texto (input
) deve ter um fundo amarelo (background: yellow;
) quando estiver focado (:focus
).
As outras alternativas são incorretas porque não utilizam a sintaxe apropriada para definir o estilo de um elemento quando ele é focado. A alternativa B tenta usar :onclick
, que não é uma pseudo-classe válida em CSS. A alternativa D inventa uma sintaxe inexistente em CSS com background: onclick(yellow);
. A alternativa E mistura um possível evento JavaScript (onfocus
) com CSS, o que também não é a notação correta. E, finalmente, a alternativa A não especifica nenhum estado ou ação, aplicando o fundo amarelo a todos os input
sempre, não apenas quando focados.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
http://www.w3schools.com/cssref/sel_focus.asp
Example
Select and style an input field when it gets focus:
input:focus {
background-color: yellow;
}
Fonte:
http://www.w3schools.com/cssref/sel_focus.asp
Quem não tem acesso: - -> C
A banca não errou? Ao ser clicado é diferente de ao ser focado, o componente receber o foco é o mouse ser passado por cima, neste caso aplica-se onFocus, por outro lado, quando o botão é clicado a ação deve ser onClick.
Gustavo, a banca está certa!
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo