Em uma página web há um formulário HTML5 com um único campo ...

Próximas questões
Com base no mesmo assunto
Q642665 Programação
Em uma página web há um formulário HTML5 com um único campo texto criado pela tag <input> que, ao ser clicado, fica com fundo amarelo. Para que isso ocorra, no bloco CSS3 incorporado à página deve existir a instrução
Alternativas

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