Como ocultar elementos de uma página da área de impressão

Se você está desenvolvendo uma página e precisa esconder elementos como botões e campos de formulários na hora de imprimir um relatório por exemplo, existe uma maneira fácil de fazer isso usando apenas um pouco de código css, sem necessariamente ter que escrever várias versões da mesma página.

Primeiro coloque os elementos que devem ficar ocultos da impressora dentro de uma div:

<div class="formulario">
  <form action="" method="post">
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome" type="text" />
  <label for="telefone">Telefone</label>
  <input type="text"id="telefone" name="telefone" type="text" />
  <label for="endereco">Endereço</label>
  <input type="text" id="endereco" name="endereco" type="text" />
  <input id="enviar" name="enviar" type="submit" value="Enviar" />
  </form>
  </div>

Depois e só criar um arquivo css para manipular a visibilidade dos elementos acrescentando esse código no início da página:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Agora dentro do print.css, colocamos o código para ocultar a div da impressora:

.formulario {
   display : none;
}

media=”print” Significa que a folha de estilo será usado apenas para a versão impressa de uma página, portanto tudo que estiver nela será ignorado quando a página estiver na tela.

Compartilhe Também:

Deixe seu comentário